Ik was aan het experimenteren met de JS GoogleMaps API, en ik heb een script kunnen maken die elke 5 seconden uit een JSON-string de lat/lon coördinaten van een voertuig ophaalt, en steeds de bijbehorende marker van plaats ververst, zodat je het voertuig op de kaart ziet bewegen.

Echter loop ik even tegen één probleem aan, en dat is de beginwaarde, die ik voor het gemak nu even op 52.1238433333,5.18094166667 heb gezet.

Is het ook mogelijk om meteen de waarde uit de JSON-string waarde te gebruiken, in plaats van eerst 5000 ms. deze vaste lat/lon coördinaten te zien? Kan dit in JavaScript, of zou ik deze alleen maar via PHP eerst op moeten halen en als var moeten declareren?

Graag jullie advies!



<script>
      function init_map() {
        var myLatLng = new google.maps.LatLng(52.1238433333,5.18094166667);
        var mapOptions = {
          zoom: 8,
          center: myLatLng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
	
	// Marker plaatsen in het midden, daarna wordt hij verplaatst naar juiste plek.
	map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
	marker = new google.maps.Marker({
	    position: myLatLng,
	    map: map,
	    draggable: false
	});
	
      } 
      google.maps.event.addDomListener(window, 'load', init_map);
	    
      function getCoords() {
	$(document).ready(function(){
	    $.ajax({
		url: "api.php",
		type: "GET",
		data: {
		    action : "vehiclenumber",
		    number : '1234'
		},
		dataType: "text",
		success: function(returnedData) {
		    var jsondata = jQuery.parseJSON(returnedData);
		      //console.log(returnedData);
		      var coords = jsondata.Latitude+','+jsondata.Longitude;
		      console.log(coords);
		      //console.log('Lat: '+jsondata.Latitude);
		      var coordsArray = coords.split(",");
		      moveMarkerMap(coordsArray[0], coordsArray[1]);
		}
	     });
	    }); 
	}
	
	function moveMarkerMap(lat,lon) {
	    var newLatLang = new google.maps.LatLng(lat,lon);
	    map.panTo(newLatLang);
	    marker.setPosition(newLatLang);
	}      
	
      setInterval(getCoords, 5000);
    </script>
Ik houd je op de hoogte via PM tegen die tijd.
Even een vraag:

Bovenaan defineer ik de marker voor vóórdat hij uiteindelijk steeds een stapje verplaatst wordt met:
 var myLatLng = new google.maps.LatLng(52.1238433333,5.18094166667);



Echter, nu moet ik de locatie eerst alsnog via PHP ophalen uit de API, totdat na 5000ms. de marker verplaatst wordt. Kan dit niet anders? Kan ik niet eerst een setTimout doen 0 sec (direct dus) en daarna steeds 5000 ms doen?

Dat gebeurt toch eigenlijk al in het laatste code-fragment van Frank? Als je document geladen is haal je direct de actuele coordinaten op, daarna elke 5 seconden opnieuw. Hoe wijkt dat af van wat je nu doet dan?
Die coördinaten die er nu staan, zijn nu nog eventjes nog een willekeurige locatie. Maar vanuit JS kan ik dus niet direct eerst direct de AJAX-request uitvoeren en daarna steeds na 5 sec. de functie.

Als dit kan, scheelt het mij een extra lookup in mijn PHP-code die naar JS wordt doorgesluisd.
Je zou bij kunnen houden of de map al geinitialiseerd is, en deze anders bouwen in getCoords die je aanroept als de pagina is geladen?
Hmmm....Ik zie dat hij het al goed lijkt te doen. Ik heb een vermoeden dat ik naar een oude cache keek, of naar het verouderde script.

Reageren