KMLMap

From Google Mapki

KMLMap is a snippet of code that enables adding markers from location-specific KML feeds to a Google Map.

[edit] Usage

var map = new GMap(document.getElementById("map");
map.addControl(new GSmallMapControl());
map.centerAndZoom(new GPoint(-122.1419, 37.4419), 4);
var khandler = new KMLHandler(map);
khandler.addFeed("test.kml");

[edit] Code

function KMLMarker(point, name, description) {
    this.base = GMarker;
    this.base(point);

    this.name = name;
    this.description = description;

    this.onClick = function() {
        this.openInfoWindowHtml("<h1>" + this.name + "</h1>" + this.description);
    }

    this.destroy = function() {
        GEvent.clearListeners(this, 'click');
    }

    GEvent.bind(this, 'click', this, this.onClick);
}
KMLMarker.prototype = new GMarker();

function KMLNSResolver(prefix) {
    if(prefix == 'kml') return "http://earth.google.com/kml/2.0";
    return null;
}

//Represents a KML feed. Used internally by KMLHandler.
function KMLFeed(map, url) {
    this.map = map;
    this.url = url;
    this.overlays = new Array();
    this.request = undefined;

    this.handleEvent = function() {
        //Request completed?
        if(this.request.readyState == 4) {
            //Delete existing overlays
            for(var i in this.overlays) {
                this.overlays[i].destroy();
                this.map.removeOverlay(this.overlays[i]);
            }
            this.overlays = new Array();

            //Populate with elements in the updated feed
            var doc = this.request.responseXML;

            placemarks = doc.documentElement.getElementsByTagName("Placemark");
            for(var i = 0; i < placemarks.length; i++) {
                var point = placemarks[i].getElementsByTagName("Point")[0];
                var coords = point.getElementsByTagName("coordinates")[0].childNodes[0].nodeValue;
                coords = coords.split(",");
                var name = placemarks[i].getElementsByTagName("name")[0].childNodes[0].nodeValue;
                var description = placemarks[i].getElementsByTagName("description")[0].childNodes[0].nodeValue;

                var point = new GPoint(parseFloat(coords[0]), parseFloat(coords[1]));
                var marker = new KMLMarker(point, name, description);
                map.addOverlay(marker);
                this.overlays.push(marker);
            }

            //Free the request object
            this.request = undefined;
        }
    }

    //Triggers whenever the map is moved or zoomed.
    //Also manually invoked when the feed is first created to initially populate
    //the feed.
    this.onMapChange = function() {
        //Trigger fetching the new map
        if(this.request != undefined) {
            this.request.abort();
        }

        url = this.url;
        bounds = map.getBoundsLatLng();

        if(url.indexOf("?") == -1) {
            url = url + "?BBOX=" + bounds.minX + "," + bounds.minY + "," + bounds.maxX + "," + bounds.maxY;
        } else {
            url = url + "&BBOX=" + bounds.minX + "," + bounds.minY + "," + bounds.maxX + "," + bounds.maxY;
        }

        this.request = GXmlHttp.create();
        this.request.open('GET', url, true);
        var _this = this;
        this.request.onreadystatechange = function(_this.handleEvent());

        this.request.send(null);
    }

    this.destroy = function() {
        GEvent.removeListener(this.moveendListener);

        for(var i in this.overlays) this.overlays[i].destroy();
    }

    //Fetch the feed for the first time
    this.onMapChange();

    //Add event handlers
    this.moveendListener = GEvent.bind(map, 'moveend', this, this.onMapChange);
}

//A KMLHandler handles (fetching, updating) KML feeds for a map
function KMLHandler(map) {
    this.map = map;
    this.feeds = [];

    this.addFeed = function(url) {
        //Add the feed to the feeds array
        this.feeds[url] = new KMLFeed(this.map, url);
    }

    this.removeFeed = function(url) {
        //Remove the feed from the feeds array
        this.feeds[url].destroy();
        delete this.feeds[url];
    }
}