Google Maps - Trying to get the same effect loading with xml file

JavaScript
1

http://assets.marcgrabanski.com/resources/jquery-google-maps/tutorial-part1.html

the link above shows a google map with randomised markers. It’s a great effect, the only thing being that the locations are randomised.

I want to load an xml file of exact locations so that they can be panned to when the text is clicked on the right hand side.

I have tried loading an xml file to achieve this without success.

If someone could help me get this working based on the code in the tutorial’s link above then I’d be grateful

2

Well, if you’re using jQuery, you’d first load up your XML data using AJAX. Then, you’d just plot the points on the Google Map using the same method as on your sample page.

Something like this may be what you’re looking for:

jQuery.ajax({url:"data.xml", dataType:"xml", success:function(data){

	var markers = [];
	for (var i = 0; i < data.childNodes.length; i++) {
		var point = new GLatLng(data.childNodes[i].lat.textContent, data.childNodes[i].lng.textContent);
		var marker = new GMarker(point);
		map.addOverlay(marker);
		markers[i] = marker;
	}
	
	// End custom code
	
	$(markers).each(function(i,marker){
		$("<li />")
			.html("Point "+i)
			.click(function(){
				displayPoint(marker, i);
			})
			.appendTo("#list");
		
		GEvent.addListener(marker, "click", function(){
			displayPoint(marker, i);
		});
	});

}})

This can replace the code starting at “// setup 10 random points”.

For the XML file, you’re probably going to have to change a few things depending on your document structure. In my simplified example, I just assumed a bunch of “<item>” elements that contain “<lat>” and “<lng>” elements which contain the latitude and longitude data.

I haven’t tested it, but hopefully it will get you off to a good start :slight_smile:

3

thanks for helping me out, although I’m still struggling to get it working!!

any more help to get this working would be greatly appreciated.

thanks once again.

4

What does your XML file look like? (What is its structure?)

5

Here’s a sample of the xml file layout

<?xml version="1.0" encoding="utf-8"?>
<markers>
     <marker lat="160.2353" lng="-9.8563" label="Marker One">
      <infowindow>Test 1</infowindow>
     </marker>
     <marker lat="153.2869" lng="-9.3457" label="Marker One">
      <infowindow>Test2</infowindow>
     </marker>
</markers>
6

still no further with this.

does anone have any suggestions or could help me out with some more of the code.

Thanks

7

I’m trying another way and my xml feed works. I have everything working except the map.panTo effect.

If someone could suggest how to get this working based on the code below then I’d be very grateful:

<body onunload="GUnload()">

    <table border=1>
      <tr>
        <td>
           <div id="map" style="width: 500px; height: 600px"></div>
        </td>
        <td width = 150 valign="top" style="text-decoration: underline; color: #4444ff;">
           <div id="side_bar"></div>
        </td>
      </tr>

    </table>

    <script type="text/javascript">
    //<![CDATA[

    if (GBrowserIsCompatible()) {
      
      var side_bar_html = ""; 
      
      var gmarkers = [];

      function createMarker(point,name,html) {
        var marker = new GMarker(point);
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
        gmarkers.push(marker);
        side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\\/a><br>';
        return marker;
      }

      function myclick(i) {
        GEvent.trigger(gmarkers[i], "click");
      }

      var map = new GMap2(document.getElementById("map"));
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.setCenter(new GLatLng( 45.2924544444444421, -7.13338056666444422), 12);

      GDownloadUrl("map.xml", function(doc) {
        var xmlDoc = GXml.parse(doc);
        var markers = xmlDoc.documentElement.getElementsByTagName("marker");
          
        for (var i = 0; i < markers.length; i++) {
          // obtain the attribues of each marker
          var lat = parseFloat(markers[i].getAttribute("lat"));
          var lng = parseFloat(markers[i].getAttribute("lng"));
          var point = new GLatLng(lat,lng);
          var html = markers[i].getAttribute("html");
          var label = markers[i].getAttribute("label");
          var marker = createMarker(point,label,html);
          map.addOverlay(marker);	 
        }
        document.getElementById("side_bar").innerHTML = side_bar_html;
      });
    }
    else {
      alert("Sorry, the Google Maps API is not compatible with this browser");
    }		
	function animate() {    
    map.panTo(marker);
  }
    </script>
  </body>