json - Google maps doesn't show markers -


i'm trying build webapp uses google map api show data server. works fine need refresh page populate map markers.

here code looks like:

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 not supported in 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);     }   }); } 

the console shows gets data server reason not add markers on first page load. reason?

try this

google.maps.event.addlisteneronce(map, 'idle', function(){     getlocations(); }); 

Comments

Popular posts from this blog

Why does Ruby on Rails generate add a blank line to the end of a file? -

keyboard - Smiles and long press feature in Android -

node.js - Bad Request - node js ajax post -