Create a map with a marker and optional info window.

This wizard uses the Google Maps API.

Customize Map View & Marker Location

First, enter the desired address/location in the box and press the button. If the marker is a little off, drag it around to where it should be. Then use the map control to zoom in/out to the desired zoom level.



Customize Info Window & Map Controls

Show this text in info window when marker clicked (leave blank for no info window):  


Show info window when map loads:  

Show pan&zoom control:  

Show map type control:  

Map width:         Map height:  

Default map type:  


Generate Code

The Maps API requires a free API key that's associated with your Google Account and the URL of your web site. By using these APIs you are agreeing to the Maps API terms of use. You can sign up for one here, and substitute it as the value of the "&key=" parameter in the script tag below.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Map</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key="
            type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[

    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        var point = new GLatLng;

        map.setCenter(point, );
        
        
        map.setMapType();

        var marker = new GMarker(point);
        
        

        map.addOverlay(marker);

        
      }
    }

    //]]>
    </script>
  </head>

  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: px; height: px"></div>
  </body>
</html>