THE WORLD'S LARGEST WEB DEVELOPER SITE

Google Maps Basic


Create a Basic Google Map

This example creates a Google Map centered in London, England:

Example

<!DOCTYPE html>
<html>
<body>

<h1>My First Google Map</h1>

<div id="map" style="width:100%;height:500px"></div>

<script>
function myMap() {
  var mapCanvas = document.getElementById("map");
  var mapOptions = {
    center: new google.maps.LatLng(51.508742,-0.120850),
    zoom: 5
  };
var map = new google.maps.Map(mapCanvas, mapOptions);
}
</script>

<script src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script>

</body>
</html>
Try it Yourself »

The rest of this page describes the example above, step by step.


The Map Container

The map needs an HTML element to hold the map:

<div id="map" style="width:100%;height:500px"></div>

The map will automatically "inherit" its size from its container element.


The Google Maps API

The Google Maps API is a JavaScript library. It is added to the web page with a <script> tag:

<script src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script>

The callback parameter specifies the function to be called (=myMap) when the API is ready.


The myMap Function

The myMap function initializes and displays the map:

<script>
function myMap() {
  var mapCanvas = document.getElementById("map");
  var mapOptions = {
    center: new google.maps.LatLng(51.508742,-0.120850),
    zoom: 5
  };
var map = new google.maps.Map(mapCanvas, mapOptions);
}
</script>

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.

new google.maps.Map() creates a new Google Maps object.


Multiple Maps

The example below defines four maps with different map types:

Example

var map1 = new google.maps.Map(document.getElementById("googleMap1"), mapOptions1);
var map2 = new google.maps.Map(document.getElementById("googleMap2"), mapOptions2);
var map3 = new google.maps.Map(document.getElementById("googleMap3"), mapOptions3);
var map4 = new google.maps.Map(document.getElementById("googleMap4"), mapOptions4);
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>