Geeks With Blogs


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);
    GEvent.addListener(map,"moveend", function(){loadPointsFromXML();});
    function loadPointsFromXML()
        var request = GXmlHttp.create();
        //grab the xml"GET", "", true);
        request.onreadystatechange = function() 
            if (request.readyState == 4) 
                var xmlDoc = request.responseXML;
    function parseXML(xmlDoc)
        var markers = xmlDoc.documentElement.getElementsByTagName("poi");
        //get the viewing area of the be used later
        var bounds = map.getBounds();
        //get rid of existing markers
        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);
    //function from Mike Williams
    function createMarker(point,html) {
        var marker = new GMarker(point);
        GEvent.addListener(marker, "click", function() {
        return marker;

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