Google Javascript Api Markers not visible

问题

I want to show markers along with my current location. In the below code location changes from default location to current location but the markers are not visible. Stores are retrieved correctly. I want to display the markers along with the my current location.

    function initMap() {

    //Set default location of google maps for demonstration purposes
    var map = new google.maps.Map(document.getElementById('map'), {
        center :  {lat: 18.533333, lng: 73.866667},
        zoom: 10
    });

    //create global variables/objects 
    var pos = {};
    var strLoc = {};
    var infoWindow = new google.maps.InfoWindow({map: map});
    var request = {};

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

            //Get current location to set the center of the google maps
            var pos = { 
                lat: position.coords.latitude,
                lng: position.coords.longitude
            };

            //get your current location for finding places around you.
            //This should be a latlng object of google maps api.
            strLoc = new google.maps.LatLng(pos);


            //create a google maps request object
            request = {
                location: strLoc,
                radius: 500,
                types:['store']
            }


            //set current location on google maps based on HTML geolocation
            infoWindow.setPosition(pos);
            infoWindow.setContent('You are Here');
            map.setCenter(pos);


            alert(request)
            var placeservice = new google.maps.places.PlacesService(map)
            placeservice.nearbySearch(request,callback)

        });


    }

}

function callback(places, status)
{

    if(status === google.maps.places.PlacesServiceStatus.OK)
    {

        for(var i = 0; i<places.length; i++)
        {
            alert(places[i].name)
            createMarkers(places[i]);
        }
    }
}

function createMarkers(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);  
    })
}

回答1:

I now get one javascript error: InvalidValueError: setMap: not an instance of Map; and not an instance of StreetViewPanorama on this line:

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

Because at that point in your code map is a reference to the <div> with id="map", not the google.maps.Map object, which is local to the initMap function. One option to fix your problem is to make it global.

var map; // global variable, outside of any function declarations
function initMap() {
  //default location
  // initialize global map variable.
  map = new google.maps.Map(document.getElementById('map'), {
    center :  {lat: -25.363, lng: 131.044},
    zoom: 10
  });
// ...

proof of concept fiddle

code snippet:

var map;

function initMap() {
  //Set default location of google maps for demonstration purposes
  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: 18.533333,
      lng: 73.866667
    },
    zoom: 10
  });

  //create global variables/objects 
  var pos = {};
  var strLoc = {};
  var infoWindow = new google.maps.InfoWindow({
    map: map
  });
  var request = {};

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

      //Get current location to set the center of the google maps
      var pos = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };

      //get your current location for finding places around you.
      //This should be a latlng object of google maps api.
      strLoc = new google.maps.LatLng(pos);


      //create a google maps request object
      request = {
        location: strLoc,
        radius: 500,
        types: ['store']
      }


      //set current location on google maps based on HTML geolocation
      infoWindow.setPosition(pos);
      infoWindow.setContent('You are Here');
      map.setCenter(pos);


      // alert(request)
      var placeservice = new google.maps.places.PlacesService(map)
      placeservice.nearbySearch(request, callback)

    });


  }

}

function callback(places, status) {

  if (status === google.maps.places.PlacesServiceStatus.OK) {

    for (var i = 0; i < places.length; i++) {
      // alert(places[i].name)
      createMarkers(places[i]);
    }
  }
}

function createMarkers(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", initMap);

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>

来源：https://stackoverflow.com/questions/39442046/google-javascript-api-markers-not-visible