google map API & XMLHttpRequest

[Craig Hopson]

hi can some one check this syntax of this cos i'm missing something it just dont work

The JS

downloadUrl("http://chsites.co.uk/track/inc/maploc.php?id='.$mapid.'&name='.$member['id'].'", function(data) {
var xml = data.responseXML;  

  var Center = xml.documentElement.getElementsByTagName("marker");		 
var map = new google.maps.Map(document.getElementById("map"), {
			    center: new google.maps.LatLng(
			 parseFloat(Center.getAttribute("lat")),
			 parseFloat(Center.getAttribute("lon"))),
			    zoom: 13,
			    mapTypeId: google.maps.MapTypeId.ROADMAP,
			    mapTypeControl: false,
			    mapTypeControlOptions: {
			    style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
				 },
			    navigationControl: true,
			    navigationControlOptions: {
				    style: google.maps.NavigationControlStyle.SMALL
			    }
		    });
}		  

   function downloadUrl(url, callback) {
	  var request = window.ActiveXObject ?
		  new ActiveXObject("Microsoft.XMLHTTP") :
		  new XMLHttpRequest;

	  request.onreadystatechange = function() {
	    if (request.readyState == 4) {
		  request.onreadystatechange = doNothing;
		  callback(request, request.status);
	    }
	  };

	  request.open("GET", url, true);
	  request.send(null);
    }
[/CODE]

The XML

[CODE]
<markers>
<marker lat="51.5589355" lon="0.1463353" speed="1.255" time="17:12:39 - 2012/12/04"/>
</markers>
[/CODE]

[Boz]

a couple of things Craig.. I just built a semi complex Google Maps module for company I'm involved with.

You can see it here:

http://www.venture51.com/people/

A couple of notes here that might be very obvious:

Google Maps API and markers require Marker library loaded in addition to Google Maps api (not sure if you included it or not)

Take a look at the source code of that page I sent you. You will see what I do.. just go through it and see how I did it.

I am using JSON feed from my database for data and I add them to marker group. If you want to customize and have more functionality I strongly encorouage you to use GoogleMarkerPlus library. You can find it here:

http://google-maps-u...ts_example.html

http://google-maps-u.../reference.html

But the short of it.. your XML should contain your long / lat information and data you want, while you parse and add your markers this way:

var markers = [];

var marker = new google.maps.Marker({
			position: latLng,
   animation: google.maps.Animation.DROP,
   title: markerCity,
   visible: true
		  });

var markerCluster = new MarkerClusterer(map, markers, mcOptions );
[/CODE]

This way you can control the whole marker cluster and use Event handlers on the map with markerclustererplus

if you don't want to work with clusters, you can just define the map in your marker declaration as you loop through your marker xml like this:

[CODE]
var markers = [];

var marker = new google.maps.Marker({
position: latLng,
animation: google.maps.Animation.DROP,
[b]map: map[/b],
visible: true
});

var markerCluster = new MarkerClusterer(map, markers, mcOptions );
[/CODE]

you will notice that I added here the map attribute. That tells this marker when it's created which map it belongs to.

[Craig Hopson]

Thanks for taking the time to reply but the problem I have is not the markers I want to change the map center every 20 seconds but before I put a timer on it just center the map from the XML

[Craig Hopson]

sorry looking back i was vague. OK a simple Google map API V3 would be

HTML

<script type="text/javascript"
	  src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC9drFQnsmuob_bO9wFITHv-5K2pM-lgD0&sensor=false">
</script>
<script type="text/javascript">
var map = new google.maps.Map(document.getElementById("map"), {
			    center: new google.maps.LatLng(LATITUDE,LONGITUDE),   //THIS MUST BE A POSITION (you understand)
			    zoom: 13,
			    mapTypeId: google.maps.MapTypeId.ROADMAP,
			    mapTypeControl: false,
			    mapTypeControlOptions: {
			    style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
				 },
			    navigationControl: true,
			    navigationControlOptions: {
				    style: google.maps.NavigationControlStyle.SMALL
			    }
		    });
</script>[/CODE]

OK this will show a map with the center of the map whatever LATITUDE,LONGITUDE you put in i wish to update the map center every 10 seconds with new coordinates (the script in first post)

[Boz]

sorry looking back i was vague. OK a simple Google map API V3 would be

HTML

<script type="text/javascript"
	  src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC9drFQnsmuob_bO9wFITHv-5K2pM-lgD0&sensor=false">
</script>
<script type="text/javascript">
var map = new google.maps.Map(document.getElementById("map"), {
				center: new google.maps.LatLng(LATITUDE,LONGITUDE),   //THIS MUST BE A POSITION (you understand)
				zoom: 13,
				mapTypeId: google.maps.MapTypeId.ROADMAP,
				mapTypeControl: false,
				mapTypeControlOptions: {
				style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
				 },
				navigationControl: true,
				navigationControlOptions: {
					style: google.maps.NavigationControlStyle.SMALL
				}
			});
</script>[/CODE]

OK this will show a map with the center of the map whatever LATITUDE,LONGITUDE you put in i wish to update the map center every 10 seconds with new coordinates (the script in first post)

Ah..that's easy..

If you want to pan to (center the map on a specific lat/long) you do this:

map.panTo(new google.maps.LatLng(latlngArr[0],latlngArr[1]));

My latingArr array is just holding values for lat/lng of new points but you can replace it with your new values.

[Craig Hopson]

thanks soooooo much buddy how about this one my polyline is all over the place you can see it here http://chsites.co.uk/track/index.php?page=show_map&id=2

if you click on a flag the speed it not speed its MYSQL id entry (just for testing)