Google maps API geolocation + radar places search

Question

I am trying to use both Geolocation and Places from the google maps API to display a map (at my location) with the nearest places around me. The two examples work seperately but not together.

Can anyone tell me why there is a problem with this? am I overwriting the map with another or doing something else wrong?

    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyA93l5zPyIvGB7oYGqzLSk28r5XuIs2Do8
&sensor=true&libraries=places"></script>

    <script>
var map;
var service;
var marker;
var pos;


function initialize() {

  var mapOptions = {
    zoom: 15
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  // Try HTML5 geolocation
  if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      pos = new google.maps.LatLng(position.coords.latitude,
                                       position.coords.longitude);


      var infowindow = new google.maps.InfoWindow({
        map: map,
        position: pos,
        content: 'Located'
      });

      map.setCenter(pos);
    }, function() {
      handleNoGeolocation(true);
    });
  } else {
    // Browser doesn't support Geolocation
    handleNoGeolocation(false);
  }

  var request = {
      location:pos,
      radius:500,
      types: ['store']
  };

  infowindow = new google.maps.InfoWindow();
  var service = new google.maps.places.PlacesService(map);
  service.nearbySearch(request,callback);

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

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);
  });
}

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
  };

  var infowindow = new google.maps.InfoWindow(options);
  map.setCenter(options.position);
}

google.maps.event.addDomListener(window, 'load', initialize);
    </script>

EDIT

Moved the code now so it looks like - Has not fixed the problem of location being undefined.

if(navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {

        var request = {
      location:pos,
      radius:500,
      types: ['store']
  };

  infowindow = new google.maps.InfoWindow();
  var service = new google.maps.places.PlacesService(map);
  service.nearbySearch(request,callback);
      pos = new google.maps.LatLng(position.coords.latitude,
                                       position.coords.longitude);


      var infowindow = new google.maps.InfoWindow({
        map: map,
        position: pos,
        content: 'Located'
      });

      map.setCenter(pos);
    }, function() {
      handleNoGeolocation(true);
    });'

Answer 1

Because of async call to navigator.geolocation.getCurrentPosition() which returns immediately, location property of request is undefined. Call to

service.nearbySearch(request,callback);

complains that location is missing. And that is true because pos is not set at that moment.

You have to move this part of code:

        var request = {
            location:pos,
            radius:500,
            types: ['store']
        };

        infowindow = new google.maps.InfoWindow();
        var service = new google.maps.places.PlacesService(map);
        service.nearbySearch(request,callback);

to

    navigator.geolocation.getCurrentPosition(function(position) {
    ...
            map.setCenter(pos);

and make variable infoWindow global.

This is changed initialize() function:

var map;
var service;
var marker;
var pos;
var infowindow;


function initialize() {

    var mapOptions = {
        zoom: 15
    };

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    console.log(map);

    // Try HTML5 geolocation
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            pos = new google.maps.LatLng(position.coords.latitude,
                                         position.coords.longitude);

            infowindow = new google.maps.InfoWindow({
                map: map,
                position: pos,
                content: 'Located'
            });

            map.setCenter(pos);

            var request = {
                location:pos,
                radius:500,
                types: ['store']
            };

            infowindow = new google.maps.InfoWindow();
            var service = new google.maps.places.PlacesService(map);
            service.nearbySearch(request,callback);
        }, function() {
            handleNoGeolocation(true);
        });
    } else {
        // Browser doesn't support Geolocation
        handleNoGeolocation(false);
    }

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