Add your own logo to a Google Maps mashup

The Google Maps API is really great for building mashups, mixing your own data and maps with Google’s. We’ve been using this on the PhilaGeoHistory.org site, as well as on Philadelphia Architects and Buildings, and it works really well.

One of the things that wasn’t particularly obvious was how to add our own logo next to Google’s logo at the bottom left of the map window. Especially if other sites will be using the maps (like PhilaPlace, for instance), there should be some credit and a link back to the source of the maps. This wasn’t obvious, but it wasn’t hard. Here’s how to do it:

1. Make a nice little logo, probably about 30 pixels high, and not too wide. It should be a PNG file with transparency, so it overlays nicely in the Google Maps interface.

2. Create a new Javascript file that contains the class for your “custom control,” which is Google’s term for any element that sits on top of the map window but doesn’t move around with the map. In this file (here’s the geohistory.js file), you should have the following:

// SETUP CUSTOM GOOGLE MAPS CONTROL TO DISPLAY GEOHISTORY LOGO

// instantiate the new "class"
function GeoHistoryLogoControl() {}

// inherit the functions from Google's Control class
GeoHistoryLogoControl.prototype = new GControl();

// setup the content of the control
GeoHistoryLogoControl.prototype.initialize = function(map)
{
     var container = document.createElement("div");

     var lnk = document.createElement("a");
     lnk.href = 'http://www.philageohistory.org';
     lnk.title = 'Historic map images provided by the ↵
          Greater Philadelphia GeoHistory Network';
     lnk.target = '_blank';

     var img = document.createElement("img");
     img.src = 'http://www.philageohistory.org/tiles/viewer/ ↵
          images/mapsfromgeohistory.png';

     lnk.appendChild(img);
     container.appendChild(lnk);
     map.getContainer().appendChild(container);

     return container;
}

// set the default location for the control
GeoHistoryLogoControl.prototype.getDefaultPosition = function()
{
     return new GControlPosition(G_ANCHOR_BOTTOM_LEFT, new GSize(75,4));
}

3. In your page that contains the map, load the Javascript file you created above, then add the control to your map.

<script src="js/geohistory.js" type="text/javascript"></script>

<script type="text/javascript">
var map = new GMap2(document.getElementById("map"));
map.enableDoubleClickZoom();
map.enableScrollWheelZoom();

map.addControl(new GLargeMapControl());  // navigation
map.addControl(new GeoHistoryLogoControl());  // logo

map.setCenter(new GLatLng(39.95,-75.2), 13);
</script>

That’s it. Works like a charm.