Google Maps API Tutorial

© 2006, 2007, 2008, 2009 Mike Williams

 
Translate this page:

 

Instant maps with the Google Wizard

Google provides a Wizard which will generate a chunk of code that you can add to your own web page.

Here's an example

Maps generated by the Wizard only show a single marker, and you don't get any control over the contents of the info window.

The generated map will also have a Google AJAX Search API box, and direction finding (in a new maps.google.com window)

You don't even have to sign up for an API key. The Wizard creates its own key for your domain.

Restrictions

The Wizard only works for locations that can be found with the Google AJAX Search API.

How to use it

  1. Go to the Wizard page and follow the three simple steps.
     
  2. Copy and paste the generated code into your own web page.
     
    Cut the code into two pieces. The bit that looks something like this can be placed anywhere on your page
      <div id="mapsearch">
    <span style="color:#676767;font-size:11px;margin:10px;padding:4px;">Loading...</span>
  </div>

    The rest of the code should be placed just before the </body> at the bottom of your page.
     

  3. Double-click your page to test it, then upload it to your website.
Customisation

You can make some minor changes to the behaviour and style of the map by studying the GSmapSearchControl documentation.

Back to Mike's Homepage
Up to the start of this tutorial