Карта Google не отображает массив маркеров

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,

обновленная скрипка

фрагмент кода:

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>