A compact map type control for Google Maps

This is a demo of the MapTypeMenuControl, a user interface element for choosing the map type in mapping applications built with the Google Maps API. It is a compact replacement for Google's GMapTypeControl for use in very small maps or applications that have so many different map types that the normal control is too large.

The control listens to addmaptype and removemaptype events so when you add or remove a new map type the menu will automatically update iteslf to reflect the change. The menu object is map.mapTypeMenuObject, so you can use the YUI menu library to extend the menu.

Here's what you need to do to use the control in your own Google Maps API map.

Quick Start

Do this to get something working quickly that's not going to get a lot of traffic. This method uses source files hosted on my server.

  1. Add the following items to your document's head section. This dynamically adds the other javascript and css files you need. 
    <script type="text/javascript" 
  src="http://maps.tafoni.net/MapTypeMenuControl/MapTypeMenuControl-load.js">
</script>
  2. In your map script, replace the map.addControl(new GMapTypeControl) call with this: 
    MTMC.addMapControl(map, new MTMC.MapTypeMenuControl());

If Speed and Reliability Matter

If your application generates a lot of traffic you should host the files on your own server. In place of step one above, do the following.

  1. Download and install the MapTypeMenuControl files.
  2. Download and install the Yahoo! User Interface Library (browser support).
  3. Add the following items to your document's head section in this order. Edit the css file so it imports the YUI files from the correct location. For improved performance, use minified versions of the javascript files and you may want to concatenate them. 
    <link rel="stylesheet" type="text/css" href="MapTypeMenuControl.css"/>
<script type="text/javascript" src="yahoo-dom-event.js"></script>
<script type="text/javascript" src="container_core-min.js"></script>
<script type="text/javascript" src="menu.js"></script>
<script type="text/javascript" src="MapTypeMenuControl.js"></script>

Release Notes:

-- Dawn Endico