Playing with Google maps API – Part one

Ok, as announced in the previous post, let’s start to analyze how to work with Google maps (Javascript) API.
Preface: while I was writing I have been a little too verbose, so I won’t respect the previously declared steps, but I will add/modify them while posting.

1. Getting an API key

In order to use the Google maps service into our website/application, we have to go at the following address:, accept the terms and conditions, specify our website url (an API key will works only for the specified url and its sub-directories), click on the “Generate Api Key” button and waiting for its generation. Note that in order to get the key, we have to be logged with a google account, otherwise Google will invite you to register before letting use its service.
After the API key generation, we will redirected to a page showing:

– The Key (for example, by asking a key for the domain, we’ll get something like: ABQIAAAAswsigAo1t_SU1aGAbcpt8hSRoQh9m-phgHuyQptS3bFLHQ8pkBQR4s7kR1aUKqmyqavqMz-lfRX09Q)
– Where this key is valid (the url that we have requested)
– A basic HTML code sample to create a map with the Google service

The only external file that will need to use to realize our custom map is this:

<script type="text/javascript" src=";v=2&amp;key=GENERATED_KEY"></script>

2. Setting up the basic map

As we can see in the Google example, the first steps in order to display the map are: put a div in the page that will be the container (with a bit of stylesheet to set its dimension) and assign it an ID for a convenient way to retrieve it with the the Javascript DOM method document.getElementById(“DIV_ID”), waiting for the loading of the page (in the example Google uses the <body> onload attribute, to pass an initialization function that will be executed after the loading of the page, but we can use a custom window.onload = ourFunction, or $(document).ready() jQuery’s method, Ext.onReady() method or else according to the js library that we want to use or not) and then use the main Google maps class GMap2.

The very basic code, to initialize the map is:

var map = new GMap2(document.getElementById("DIV_ID"));

However the line above will only produce a grey box with the Google logo, and the link “Terms of use”.
To display something into the map, we must tell Google what part of the world we want to see.
This can be possible by using the GMap2’s method setCenter(), which requires a GLatLng as a mandatory parameter, plus an optional zoom level.
As API reference says: GLatLng is a point in geographical coordinates longitude and latitude.
This is the code (in the minimal possible version):

map.setCenter(new GLatLng(0, 0));

The previous command, will produces a very general geographic view, that according to us div dimensions will show a repeated world’s map.
That’s because, we didn’t specify a zoom level, and so 0 (zero) is assumed by Google (which is the lowest possible value).
Let’s try to pass a zoom value of 1 and see what happen!

map.setCenter(new GLatLng(0, 0), 1);

Hei! Finally we can at least read the names of the countries and pacific and Indian oceans… but is still not so funny, let’s move on!

3. Positioning the map on a given location

To positioning the map on a specific geographic location we have to know the latitude and longitude coordinates and passing them into the GLatLng,
constructor’s arguments. The basic way to do this, is to use website, search for a location (for example “Italy”), click on “Link”
button (the last link above the map) and extract the queryString parameter “ll”, which in my test for Italy are “41.87194,12.56738”.


By using the setCenter() method, in this way:

map.setCenter(new GLatLng(41.87194, 12.56738), 5);

We are able to visualize the whole Italy, plus others adjacent nations (in a 500×300 pixel div). This is how the map should be:


4. Add map controls

The map we have created so far doesn’t offer many features, except the drag and drop and the doubleclick to zoom, which is enabled by default (to avoid that functionality we can use disableDoubleClickZoom() map’s method, and we can eventually toggle it alternating with enableDoubleClickZoom() and checking for its status with doubleClickZoomEnabled() which returns a boolean indicating if is active or not).
To add a map control, we have to use the addControl() method and pass an instance of the desired control.
The following are the basic controls that Google maps offers:

map.addControl(new GMapTypeControl());

That will display:


map.addControl(new GHierarchicalMapTypeControl());

That will display:


map.addControl(new GMenuMapTypeControl(false));
// we can pass true to display short names

That will display:


map.addControl(new GSmallZoomControl());

That will display:


map.addControl(new GSmallMapControl());

That will display:


map.addControl(new GLargeMapControl());

That will display:


map.addControl(new GScaleControl());

That will display:


map.addControl(new GOverviewMapControl());

That will display:


Many controls are mutually exclusive, ie if we use for example both GSmallMapControl and GLargeMapControl the result is an ugly sovrapposition of these.