SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot
    Join Date
    Nov 2006
    Posts
    164
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    http://assets.marcgrabanski.com/reso...ial-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. #2
    SitePoint Enthusiast sffc's Avatar
    Join Date
    Jul 2006
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code JavaScript:
    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
    "I haven't failed, I just found
    100,000 ways that don't work"
    Thomas Edison

  3. #3
    SitePoint Zealot
    Join Date
    Nov 2006
    Posts
    164
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    SitePoint Enthusiast sffc's Avatar
    Join Date
    Jul 2006
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What does your XML file look like? (What is its structure?)
    "I haven't failed, I just found
    100,000 ways that don't work"
    Thomas Edison

  5. #5
    SitePoint Zealot
    Join Date
    Nov 2006
    Posts
    164
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's a sample of the xml file layout

    Code:
    <?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. #6
    SitePoint Zealot
    Join Date
    Nov 2006
    Posts
    164
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    still no further with this.

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

    Thanks

  7. #7
    SitePoint Zealot
    Join Date
    Nov 2006
    Posts
    164
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code:
    <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>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •