This example creates a Google Map centered in London, England:
The rest of this page describes the example above, step by step.
Create a function to initialize the map:
In the initialize function, create an object (mapProp) to define the properties for the map:
The center property specifies where to center the map. Create a LatLng object to center the map on a specific point. Pass the coordinates in the order: latitude, longitude.
The zoom property specifies the zoom level for the map. zoom: 0 shows a map of the Earth fully zoomed out. Higher zoom levels zoom in at a higher resolution.
The mapTypeId property specifies the map type to display. The following map types are supported:
Create a <div> element to hold the map. Use CSS to size the element:
|The map will always "inherit" its size from its container element.|
The code above creates a new map inside the <div> element with id="googleMap", using the parameters that are passed (mapProp).
Add a DOM listener that will execute the initialize() function on window load (when the page is loaded):
It is also possible to load the Google Maps API on demand.
The example below uses window.onload to load the Google Maps API after the page has fully loaded.
The loadScript() function creates the Google Maps API <script> tag. In addition, the callback=initialize parameter is added to the end of the URL to execute the initialize() function after the API is fully loaded:
The example below defines four maps on one web page (four maps with different map types):
Google allows your web site to call any Google API, many thousand times per day.
If you plan for heavier traffic, you should get a free API key from Google.
Go to https://console.developers.google.com to get a free key.
Google Maps expects to find the API key in the key parameter when loading an API: