Карты Google не показывают маркеры

Question

Я пытаюсь создать webapp, который использует Google Map api для отображения данных с сервера. Он отлично работает, но мне нужно обновить страницу, чтобы заполнить карту маркерами.

Вот что мой код выглядит следующим образом:

var directionsDisplay; 
var directionsService = new google.maps.DirectionsService(); 
var map; 
latitude=1; 
longitude=1; 

var styles = [ 
    { 
     stylers: [ 
     { hue: "#00ffe6" }, 
     { saturation: -20 } 
     ] 
    },{ 
     featureType: "road", 
     elementType: "geometry", 
     stylers: [ 
     { lightness: 100 }, 
     { visibility: "simplified" } 
     ] 
    },{ 
     featureType: "road", 
     elementType: "labels", 
     stylers: [ 
     { visibility: "off" } 
     ] 
    } 
    ]; 



$(document).ready(function() { 

if (navigator.geolocation) { 
    navigator.geolocation.getCurrentPosition(function(position){ 
    latitude = position.coords.latitude; 
    longitude = position.coords.longitude; 
    coords = new google.maps.LatLng(latitude, longitude); 
    directionsDisplay = new google.maps.DirectionsRenderer({suppressMarkers: true}); 

    var mapOptions = { 
     zoom: 15, 
     center: coords, 
     panControl: false, 
     zoomControl: false, 
     mapTypeControl: false, 
     scaleControl: false, 
     streetViewControl: false, 
     overviewMapControl: false, 
     disableDefaultUI: true, 
     styles: styles, 
     navigationControlOptions: { 
      style: google.maps.NavigationControlStyle.SMALL 
     }, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     map = new google.maps.Map(document.getElementById("mapContainer"), mapOptions); 
     directionsDisplay.setMap(map); 
     var image = 'mapmarker.png'; 

     var marker = new google.maps.Marker({ 
       position: coords, 
       map: map, 
       icon: image, 
       title: "Your current location!" 
     }); 

    }); 
}else { 
    alert("Geolocation API is not supported in your browser."); 
} 


getLocations(); 


function getLocations() { 
    $.getJSON("fromMyServer", function (json) { 

     var location; 
     $.each(json.key, function (i, item) { 
      addMarker(item.lat,item.lng, item.name, item.address); 

      var tiedot = item.Nimi; 
     }); 

    }); 
} 

var markersArray; 


function addMarker(lat,lng,name,address) { 

    var contentString = '<h3>'+name + '</h3>'+ address; 

    var tiedot = contentString + '<br><button onclick="calcRoute('+lat+','+lng+')">get route</button> ' 

     var Marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(lat,lng), 
      map: map, 
      title:"Test" 
     }); 


     google.maps.event.addListener(Marker, 'click', function() { 
      $('.tiedot').empty(); 
      $('.tiedot').append('<p>'+tiedot+'</p>'); 
      $("#panel").slideDown("slow"); 
      //infowindow.open(map,this); 

    }); 

} 



}); 
function calcRoute(lat,lng) { 

    var start = latitude+','+longitude; 

    var end = lat+','+lng; 
    var request = { 
    origin:start, 
    destination:end, 
    travelMode: google.maps.TravelMode.DRIVING 
    }; 
    directionsService.route(request, function(result, status) { 
    if (status == google.maps.DirectionsStatus.OK) { 
     directionsDisplay.setDirections(result); 
    } 
    }); 
} 

консоль показывает, что она получает данные от сервера, но по какой-то причине он не добавляет каких-либо маркеров на первой загрузке страницы. Что может быть причиной?

Answer 1

Попробуйте

google.maps.event.addListenerOnce(map, 'idle', function(){ 
    getLocations(); 
});