How to Add a Google Map to a Web Site
Google Maps are Powerful and Can Easily be Added to any Web Page
Dec 3, 2008
Google maps is a powerful mapping system that allows its users to view both maps and satellite pictures of any location in the world. However, even more importantly (from a web site designer's point of view), Google provides a free API (Application Programming Interface) that enables a web site designer to add Google Maps to any web page. All that the web site designer needs are:
- a Google Maps Key
- a little bit of Javascript code
Obtaining a Google Maps Key
A Google Maps key may be obtained from the Google API sign up web page. Each key:
- is only valid for a single web site
- must be used whenever the API is accessed
That said - it only takes a few seconds to generate the key and it's free.
Calling the Google Maps API
The Google Maps API can be accessed very easily; it is actually a Javascript library and is loaded as part of a web page head section:
There are two things to take note of when loading the Google Maps API:
- the key parameter in the API URL needs to contain the key generated by the Google API web site
- the sensor should be set to: false if the API is being called from a web site; true if it is being called from a sensor (such as a mobile phone with a GPS)
Once the API has been loaded then the map itself can be initialized.
Initializing the Google Map
The map is initialized by creating a Google Map GMap2 object (if the browser is compatible):
The center of of the map then needs to be set with the setCenter method; this requires:
- the latitude of the location
- the longitude of the location
- the zoom level (the greater the number the greater the detail)
Finally the type of map is selected; this can be:
- G_NORMAL_MAP
- G_SATELLITE_MAP
- G_HYBRID_MAP: the normal map overlaying the satellite photographs
- G_PHYSICAL_MAP: terrain information
The map is actually loaded at the same time as the body and should be unloaded with the GUnload method - this will prevent any memory leaks:
Displaying the Map
The map itself is a div with the id map_canvas:
And with that a simple map of anywhere in the world can be displayed in a web page.
How to Find the Latitude and Longitude with Google Maps
The maps are always centered on a location's latitude and longitude; the latitude and longitude can be found by using using Google Maps, even though Google Maps does not display them:
- go to the Google Maps web site (http://maps.google.com)
- center the map on the desired location
- enter the following into the address box of the web browser:javascript:void(prompt(',gApplication.getMap().getCenter()));
- press return and read the latitude and longitude from the box that will be displayed
Summary
It is very easy to add a Google Map to any web page; all that's required is for the web site designer to:
- obtain a free API key for the web site
- use the API key to load the Google Map Javascript API
- use Javascript to create a GMap2 object
- center the map on a location's latitude and longitude by using the setCenter method
- define the type of map to display
And so, with the minimum of effort, a professional looking map will be displayed - all through the power of Google Maps.
