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
Post a Comment