Google Maps Basic
Create a Basic Google Map
This example creates a Google Map centered in London, England:
Example
<!DOCTYPE html>
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize()
{
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>
Try it yourself »
The rest of this page describes the example above, step by step.
1. Load the Google API
The Google Maps API is JavaScript library. It can be added to a web page with
a script tag:
<script src="http://maps.googleapis.com/maps/api/js"></script>
2. Set Map Properties
Create a function to initialize the map:
In the initialize function, create an object (mapProp) to define the
properties for the map:
var mapProp = {
center:new google.maps.LatLng(51.508742, -0.120850),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
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:
- ROADMAP (normal, default 2D map)
- SATELLITE (photographic map)
- HYBRID (photographic map + roads and city names)
- TERRAIN (map with mountains, rivers, etc.)
3. Create a Map Container
Create a named <div> element to "contain" the map. Use CSS to
size the element:
Example
<div id="googleMap" style="width:500px;height:380px;"></div>
|
The map will always "inherit" its size from its container element. |
4. Create a Map Object
Example
var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);
The code above creates a new map inside the <div> element (googleMap) using
the parameters that are passed (mapProp).
5. Add an Event Listener to Load the Map
Add a DOM listener that will execute the initialize() function on window load
(when the page is loaded):
google.maps.event.addDomListener(window, 'load', initialize);
Asynchronously Loading
It is 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:
Example
function loadScript()
{
var script = document.createElement("script");
script.src = "http://maps.googleapis.com/maps/api/js?callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
Try it yourself »
Multiple Maps
The example below defines four maps on one web page (four maps with different
map types):
Example
var map1 = new google.maps.Map(document.getElementById("googleMap1"), mapProp1);
var map2 = new google.maps.Map(document.getElementById("googleMap2"), mapProp2);
var map3 = new google.maps.Map(document.getElementById("googleMap3"), mapProp3);
var map4 = new google.maps.Map(document.getElementById("googleMap4"), mapProp4);
Try it yourself »
Google API Key
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:
<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_KEY"></script>
Color Picker