谷歌地图不显示标记数组

Question

我使用此代码来显示地图，具体取决于帖子，该地图可能会或可能不会显示在页面上。默认情况下，我不会初始化地图，因为只有在用户互动后才会显示。

function maps (postnum) {

    var thisDiv = '#'+postnum+'-markers';

    var delay = 10;
    var infowindow = new google.maps.InfoWindow();

    var map = new GMaps({
        div: thisDiv,
        lat: 0,
        lng: 0,
        zoom: 8,
        disableDefaultUI: true,
        zoomControl: true});

    var bounds = new google.maps.LatLngBounds();

    var geocoder = new google.maps.Geocoder();

    function geocodeAddress(address, next) {
        geocoder.geocode({address:address}, function (results,status) { 
            if (status == google.maps.GeocoderStatus.OK) {
                var p = results[0].geometry.location;
                var lat = p.lat();
                var lng = p.lng();
                createMarker(address,lat,lng);
            } else {
                if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
                    nextAddress--;
                    delay++;
                } else {
                }   
            }
            next();
        });
    }

    function createMarker(add,lat,lng) {

        var contentString = add;
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(lat,lng),
            setMap: map,
        });

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

        bounds.extend(marker.position);

    }

    var locations = [
        'New Delhi, India',
        'Mumbai, India',
        'Bangaluru, Karnataka, India',
        'Hyderabad, Ahemdabad, India',
        'Gurgaon, Haryana, India'
    ];

    var nextAddress = 0;

    function theNext() {
        if (nextAddress < locations.length) {
            setTimeout(geocodeAddress(locations[nextAddress],theNext), delay);
            nextAddress++;
        } else {
            map.fitBounds(bounds);
        }
    }

    theNext();

};

稍后应显示maps(postnum);时，我会打电话给我。

地图显示正常，边界也正常显示，但我没有看到任何标记。我发现了类似的问题，该错误是由未先调用地图引起的。

Fiddle

如果我不想在页面加载时调用地图，而以后再怎么处理？

Answer 1

您在标记结构中有错字。在函数createMarker中：

setMap: map,

应为：

map: map,

updated fiddle

代码段：

var thisDiv = '1234-markers';

var delay = 10;
var infowindow = new google.maps.InfoWindow();

var map = new google.maps.Map(document.getElementById(thisDiv), {
  center: new google.maps.LatLng(33.808678, -117.918921),
  zoom: 14,
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

var bounds = new google.maps.LatLngBounds();

var geocoder = new google.maps.Geocoder();

function geocodeAddress(address, next) {
  geocoder.geocode({
    address: address
  }, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      var p = results[0].geometry.location;
      var lat = p.lat();
      var lng = p.lng();
      createMarker(address, lat, lng);
    } else {
      if (status == google.maps.GeocoderStatus.OVER_QUERY_LIMIT) {
        nextAddress--;
        delay++;
      } else {}
    }
    next();
  });
}

function createMarker(add, lat, lng) {

  var contentString = add;
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(lat, lng),
    map: map,
  });

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

  bounds.extend(marker.position);

}

var locations = [
  'New Delhi, India',
  'Mumbai, India',
  'Bangaluru, Karnataka, India',
  'Hyderabad, Ahemdabad, India',
  'Gurgaon, Haryana, India'
];

var nextAddress = 0;

function theNext() {
  if (nextAddress < locations.length) {
    setTimeout(geocodeAddress(locations[nextAddress], theNext), delay);
    nextAddress++;
  } else {
    map.fitBounds(bounds);
  }
}

theNext();

body {
  margin: 0;
  padding: 0;
  font: 12px sans-serif;
}

h1,
p {
  margin: 0;
  padding: 0;
}

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="1234-markers" style="height: 400px;"></div>