Google Maps API Tutorial

© 2006, 2007, 2008, 2009 Mike Williams

Translate this page:



Passing and receiving parameters isn't part of the API itself, but it's something that you might want to do with your map.

Receiving Parameters

You can add parameters to the end of a URL like this example_linktothis.htm?lat=53.816134&lng=-3.055567&zoom=18&type=k

Using parameters allows you to use the same page to display different information. In this case I'm using the parameters to pass the latitude, longitude, zoom and map type, but you could pass other information in the same way.

The contents of the URL string from the "?" onwards are made available to the Javascript on that page in a variable called "". The code can scan the information in that variable and perform the actions requested in the parameters.

It is conventional to use the same format as is used by a GET request from a <form>, i.e. a sequence of &argname=value pairs. You don't actually have to format the information that way as long as long as your Javascript knows how to parse whatever you do send.

In the example I perform the following steps:

  1. Set up some default values in case the page has been called without a complete set of parameters.
  2. Remove the "?" from the front of the string.
  3. Break the string into a series of "argname=value" pairs
  4. Break each of those into argname and value.
  5. Perform specific actions for each argname.
The map is then created and setCenter is called using the information received.

The example uses .toLowerCase() to convert the received string to lower case.


You can use the same mechanism to specify a marker, and have the page centre on that marker or open its info window, like this example_linktomarker.htm?marker=1 or like this example_linktomarker.htm?id=Marker%20Two

If passing an id string that may contain spaces or other punctuation, use unescape() to convert the escaped characters back into normal text.

Sending Parameters

The first example page has a "Link to this page" link.

That link points to a URL that contains parameters that contain the lat, lng, zoom and type settings for the current display.

So, for example, you could right-click that link, copy the link location, and email that URL to someone else. When they use the URL that they receive in their email, the parameters are passed through their browser to the Javascript on the page and the map status is regenerated exactly as it was when you saved the link.

In order for such right-clicks to work, it's not possible to generate the URL on demand. What we have to do is create the URL every time the map state changes, so that it's already there when someone right-clicks it.

In my example, I perform the following steps:

  1. Put an empty <div id="link"></div> in the html.
  2. Write a little function, makeLink(), that reads the status, creates the URL string and builds an <a> link inside that <div>
  3. The makeLink() function is called when the page is opened.
  4. A GEvent listener calls makeLink() again every time the map state changes.

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