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="googleMap" style="width:100%;height:400px;"></div>
<script>
function myMap() {
var mapProp= {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>
</body>
</html>
The rest of this page describes the example above, step by step.
The Map Container and Size
The map needs an HTML element to hold the map:
<div id="googleMap" style="width:100%;height:400px"></div>
Also set the size of the map.
Create a Function to Set The Map Properties
function myMap() {
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
The mapProp variable defines the properties for the map.
The center property specifies where to center the map (using latitude and longitude coordinates).
The zoom property specifies the zoom level for the map (try to experiment with the zoom level).
The line: var map=new google.maps.Map(document.getElementById("googleMap"), mapProp); creates a new map inside the <div> element with id="googleMap", using the parameters that are passed (mapProp).
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);
Free Google API Key
Google allows a website to call any Google API for free, thousands of times a day.
Go to https://developers.google.com/maps/documentation/javascript/get-api-key to learn how to get an API key.
Google Maps expects to find the API key in the key parameter when loading an API:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>
