Google Moon API Examples

These simple examples demonstrate how you can use the Google Maps API to make your own maps using Google Moon (or Google Mars!) imagery, just like you can for the Earth.

A Simple First Example

About This Map

This is a simple example to show how to make a Google Moon or Mars map appear in your own web page. Once you've made the map, you can then use any of the usual Google Maps APIs to produce your own overlays or mash-ups, just like you would for the Earth!

To make a map of the Moon, all you have to do is specify G_MOON_MAP_TYPES as the value of the mapTypes option when you create the map. Alternatively, if you specify G_MARS_MAP_TYPES you will get a map of Mars instead.

Below is a complete example, which also adds the pan/zoom control, the map type control, and the scale bar like you see in the map above. Of course, if you copy and paste that code you should be sure to replace the string YOUR_KEY with your site's Google Maps API key. (You can see exactly what this example looks like.)

Note that in this example we explicitly request version 2.95 of the Google Maps API. At some point this will become the default version, but for the time being you have to be specific or you will not be able to use the new Moon and Mars features.

Example Source Code

<html><head>
  <script src="http://maps.google.com/maps?file=api&v=2.95&key=YOUR_KEY"
    type="text/javascript"></script>
  <script type="text/javascript">

    function initialize() {
      map = new GMap2( document.getElementById("map"),
                       {mapTypes:G_MOON_MAP_TYPES} );

      map.addControl( new GLargeMapControl());
      map.addControl( new GMapTypeControl() );
      map.addControl( new GScaleControl() );
      map.setCenter( new GLatLng(0,0), 1 );
    }
  </script>
</head>
<body onload="initialize()" onunload="GUnload()">
  <div id="map" style="width:512px; height:300px"></div>
</body></html>