Geeks With Blogs

News



Add to Google

Tim Hibbard CEO for EnGraph software

Too many Google Maps mashups force the user to enter a zip code, or select a state before displaying the data to the user.  This interrupts the user experience and takes away the "browsing" capabilities that Google Maps offers.

This JavaScript code will show how load data from XML using the Google Maps AJAX helper when the user moves the map and display only the points that are in the viewing range of the user.  The XML file is located here.  And a working example is here.

<script type="text/javascript">
    
    var map = new GMap2(document.getElementById("mapdiv"));
    map.addControl(new GLargeMapControl());
    map.addControl(new GMapTypeControl());
    var point = new GLatLng(38,-95);
    map.setCenter(point,4);
    loadPointsFromXML();
    GEvent.addListener(map,"moveend", function(){loadPointsFromXML();});
    
    
    function loadPointsFromXML()
    {
        var request = GXmlHttp.create();
        //grab the xml
        request.open("GET", "http://timhibbard.com/wherestim/demo_poidata.xml", true);
        request.onreadystatechange = function() 
        {
            if (request.readyState == 4) 
            {
                var xmlDoc = request.responseXML;
                parseXML(xmlDoc);
            }
        }
        request.send(null);
        
    
    }
    
    function parseXML(xmlDoc)
    {
        var markers = xmlDoc.documentElement.getElementsByTagName("poi");
        //get the viewing area of the map...to be used later
        var bounds = map.getBounds();
        //get rid of existing markers
      map.clearOverlays();
        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"));
            //create point from lat/lng
            var point = new GLatLng(lat,lng);
            //check if point is inside the viewing area of the map
            if (bounds.contains(point) == true)
            {
                var html = markers[i].getAttribute("info");
                var marker = createMarker(point,html);
                map.addOverlay(marker);
            }
        }
    
    }
    //function from Mike Williams http://www.econym.demon.co.uk/googlemaps/
    function createMarker(point,html) {
        var marker = new GMarker(point);
        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
        return marker;
      }
    </script>

Check Mike Williams Tutorials for many great code examples for using Google Maps

Posted on Friday, June 9, 2006 11:48 AM | Back to top


Comments on this post: Using Google Maps .getBounds() function

# re: Using Google Maps .getBounds() function
Requesting Gravatar...
Can you tell me if this function might help with my scenario? I'm needing to set the initial zoom level such that all of the markers loaded from xml will be visible. Thanks.
Left by John Howard on Feb 15, 2008 8:42 AM

# re: Using Google Maps .getBounds() function
Requesting Gravatar...
So every time I load entire database of cordinates and then check it with getbounds()? is it not a costly method?
Left by Adnan on Dec 27, 2008 8:47 AM

# re: Using Google Maps .getBounds() function
Requesting Gravatar...
Thanks, just what I was looking for
Left by Jon on Mar 08, 2009 2:21 PM

# re: Using Google Maps .getBounds() function
Requesting Gravatar...
Hi,
I tried to download xml file and working example but i get message "Page doesn't exists" Can you please provide me with thoes files. Thanks
Left by slobodanka on Feb 09, 2012 9:10 AM

Your comment:
 (will show your gravatar)


Copyright © Tim Hibbard | Powered by: GeeksWithBlogs.net