Próbuję używać zarówno Geolokalizacji, jak i Miejsc z interfejsu API Google Maps, aby wyświetlić mapę (w mojej lokalizacji) z najbliższymi miejscami wokół mnie. Dwa przykłady działają osobno, ale nie razem.

Czy ktoś może mi powiedzieć, dlaczego jest z tym problem? czy nadpisuję mapę inną, czy robię coś innego źle?

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

EDYTOWAĆ

Przeniesiono kod tak, aby wyglądał - Nie naprawiono problemu z niezdefiniowaniem lokalizacji.

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