Google Maps Places API

Question

I'm a Javascript newbie and I can't seem to get this script working.

Managed to get the geolocation working but no places markers show when loaded. Tried a lot of stuff can you guys help me out?

    var map;

    function initialize() {
    var mapOptions = {
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        zoom: 13
    };
    map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

    var input = document.getElementById('searchtxt');
    var autocomplete = new google.maps.places.Autocomplete(input);

    autocomplete.bindTo('bounds', map);
    if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = new google.maps.LatLng(position.coords.latitude,
                                       position.coords.longitude);

      map.setCenter(pos);
    }, function() {
      handleNoGeolocation(true);
    });
    } else {
    // Browser doesn't support Geolocation
    handleNoGeolocation(false);
    }
    var request = {
        location: pos,
        radius: 1500,
        types: ['restaurant']
    };
    alert('OK -> ' + request); //THIS DOESN'T SHOW. WHY??
    var service = new google.maps.places.PlacesService(map);
    service.nearbySearch(request, callback);
}
function handleNoGeolocation(errorFlag) {
  if (errorFlag) {
    var content = 'Error: The Geolocation service failed.';
  } else {
    var content = 'Error: Your browser doesn\'t support geolocation.';
  }

  var options = {
    map: map,
    position: new google.maps.LatLng(60, 105),
    content: content
  };

  map.setCenter(options.position);
}


function callback(results, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
        for (var i = 0; i < results.length; i++) {
            createMarker(results[i]);
        }
    } else {
}
}

function createMarker(place) {
  var placeLoc = place.geometry.location;
  var marker = new google.maps.Marker({
    map: map,
    position: place.geometry.location
  });

  google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(place.name);
    infowindow.open(map, this);
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

Even the ALERT doesn't show, but if I put it before the var request statement it does show: "OK -> Undefined".

What's wrong?

Thanks.

did you even check back after reading the question? – Phil Feb 19 '14 at 15:50 — Phil, Feb 19 '14 at 15:50

score 0 · Accepted Answer · edited May 23 '17 at 11:57

0

getCurrentPosition() gets fired asynchronously. This means that the var pos variable isn't set in this scope. This leaves pos undefined. This throws an error when you attempt to set it in the var options object. This breaks the code and the alert() is never fired.

The alert() works before the object because the erroneous assignment, location: pos, hasn't happened yet.

This error was clearly displayed in the console so I would suggest learning to debug that way.

Here is a question that I asked a'while back that might help you: how to use/store JSON data after the callback has fired?

edited May 23 '17 at 11:57

Community

1
1

answered Feb 18 '14 at 21:47

Phil

10,948
17
69
101

Thanks Phil. I Understand the problem and will try to correct it. I'm a real javascript newbie and having a hard time trying to learn it. I'll define the pos in a var so i can use it afterwards on the code. Thanks again. – user3325414 Feb 19 '14 at 20:36

Google Maps Places API

1 Answers1