Wednesday, January 12, 2011

Google Maps Tutorial : 1

Making instant maps with the Google Wizard
-----------------------------------------------------------


Google provides a Wizard which will generate a chunk of code that you can add to your own 
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 theGSmapSearchControl documentation.


Making instant maps by embedding maps.google.com

It's now easy to embed a maps.google.com map in your own web page.
That can include map searches, get directions, My Maps (your own and those created by others), KML files and GeoRSS files. It can't include Mapplets.
The content is dynamic. The display shows the current result of performing the search or loading the My Map file, etc., rather than the content that was found at the time that you embedded the map.
All you have to do is to go to maps.google.com and set up the view exactly how you want it, then click on "Link to this page" and copy the "Paste HTML to embed in website" text into your own web page. No API key is required. No knowledge of Javascript is required.
There's a "Customise and preview" option that allows you to change the size of the embedded map.

You will find shortly a tutorial on using Google Map API.

No comments:

Post a Comment

subversion video