pmacs3/code_examples/map.js

// some useful globals
var map;
var showing = "venues";

var people = [
    ["Erik", "http://www.bearhome.net", "924 S. Farragut St., Philadelphia"],
    ["Corey", "", "49th and Florence, Philadelphia"]
];

var venues = [
    ["Danger Danger", "http://www.myspace.com/dangerdangerhouse", "900 S. 47th St., Philadelphia, PA"],
    ["409 House", "http://www.myspace.com/westphilly409", "409 S. 43rd St., Philadelphia, PA"],
    ["Haunted Cream Egg", "http://www.myspace.com/hauntedcreamegg", "4207 Baltimore Ave., Philadelphia, PA"],
    ["The Avant Gentlemen's Lodge", "http://www.myspace.com/avantgentlemenslodge", "4028 Filbert St., Philadelphia, PA"],
    ["Be Happy House", "http://www.circley.net/behappy/", "4078 Spring Garden St., Philadelphia, PA"],
    ["The Veggieplex", "http://www.myspace.com/theveggieplex", "1019 S. 47th St., Philadelphia, PA"],
    ["LAVA", "http://www.lavazone.org/", "4134 Lancaster Ave., Philadelphia, PA"],
    ["Clap It Off!", "http://www.myspace.com/clapitoff", "1208 S. 46th St., Philadelphia, PA"],
    ["The Rotunda", "http://www.foundationarts.org/events.html", "4014 Walnut St., Philadelphia, PA"],
    ["The Millcreek Tavern", "http://www.millcreektavernphilly.com", "4200 Chester Ave., Philadelphia, PA"],
    ["Eris Temple", "", "602 S. 52nd St., Philadelphia, PA"],
    ["The Warehouse", "", "5027 Beaumont St., Philadelphia, PA"]
];

var markers = [];

// base icon stuff so we create labelled icons
var baseIcon = new GIcon();
baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
baseIcon.iconSize = new GSize(20, 34);
baseIcon.shadowSize = new GSize(37, 34);
baseIcon.iconAnchor = new GPoint(9, 34);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
baseIcon.infoShadowAnchor = new GPoint(18, 25);

function getCode(index) {
    return String.fromCharCode("A".charCodeAt(0) + index);
}

function getIcon(index) {
    var letter = getCode(index);
    var icon = new GIcon(baseIcon);
    icon.image = "http://www.google.com/mapfiles/marker" + letter + ".png";
    return icon;
}

function load() {
    if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map"));
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
        showVenues();
    }
}

function showVenues() {
    map.clearOverlays();
    markers = [];
    
    var link_html = "<h3>venues:</h3><p>";
    for(var i=0; i < venues.length; i++) {
        link_html += showAddress(i, venues[i][0], venues[i][1], venues[i][2]);
    }
    link_html += "</p>";      
    
    document.getElementById("links").innerHTML = link_html;
    showing = "venues";
}

function showPeople() {
    map.clearOverlays();
    markers = [];
    
    var link_html = "<h3>people:</h3><p>";
    for(var i=0; i < people.length; i++) {
        link_html += showAddress(i, people[i][0], people[i][1], people[i][2]);
    }
    link_html += "</p>";
    
    document.getElementById("links").innerHTML = link_html;
    showing = "people";
}

function hilightMarker(index) {
    var marker = markers[index];
    if(marker) {
        setInfoMarkerHtml(index, marker);
    } else {
        debug("didn't find a marker");
    }
}

function debug(s) {
    document.getElementById("debug").innerHTML = s;
}

function setInfoMarkerHtml(index, marker) {
    var html;
    var entry;
    if(showing == "people") {
        entry = people[index];
    } else {
        entry = venues[index];
    }
    var name = entry[0];
    var url = entry[1];
    var address = entry[2];
    
    if(url) {
        html = "<a target=\"_blank\" href=" + url + "><b>" + name + "</b></a><br/>" + address;
    } else {
        html = "<b>" + name + "</b><br/>" + address;
    }
    debug(html);
    marker.openInfoWindowHtml(html);
}

function showAddress(index, name, url, address) {
    var geocoder = new GClientGeocoder();
    geocoder.getLatLng(
        address,
        function(point) {
            if (!point) {
                alert(address + " not found");
            } else {
                map.setCenter(point, 13);
                var icon = getIcon(index);
                var marker = new GMarker(point, icon);
                GEvent.addListener(
                    marker,
                    "click",
                    function() {
                        setInfoMarkerHtml(index, marker);
                    }
                );
                map.addOverlay(marker);
                markers[index] = marker;
            }
        }
    );
    var code = getCode(index);
    return "<a href=\"javascript:hilightMarker(" + index + ")\">" + code + ": " + name + "</a><br/>";
}