The Basics

Google Maps API Tutorial

Maps in articles

If you’ve got a page that contains significant information other than the map, then you won’t want to deny access to people using browsers that are not compatible with the Google maps API or which have Javascript turned off. They might be interested to read the text in the rest of the page

What you can do is to remove the <noscript> section, and the alert that you’d normally throw for a non-compatible browser. Instead, initially create the map <div> with zero size, like this.

<div id=”map” style=”width: 0px; height: 0px”></div>
Then, in your Javascript, if the browser is compatible, change the width and height to the required size just before creating the GMap.

var m = document.getElementById(“map”);
m.style.height = “400px”;
m.style.width = “500px”;
var map = new GMap2(m);
If you switch off Javascript and reload this page, or view it in a non-compatible browser, you’ll still be able to read all the text and see everything else on the page, but there will be no map, and no empty space where the map would have been.

Advertisements

Instant Maps

Google Maps API Tutorial

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.