Basics of Google Maps

Create a basic Google map

This example creates a Google map centered on London, UK:

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>

Next, we will study the above example step by step.

Map container and size

The map needs an HTML element to store the map:

<div id="googleMap" style="width:100%;height:400px"></div>

and 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);
}

mapProp Variables define the properties of the map.

center The property specifies the center position of the map (using latitude and longitude coordinates).

zoom The property specifies the zoom level of the map (try zooming in on the map).

Please look at this line:

var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);

It uses the passed parameters (mapProp) Create a new map within the <div> element with id="googleMap".

Multiple Maps

The following example defines maps of four 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 websites to call any Google API for free, thousands of times a day.

Please visit the following link to learn how to obtain an API key:

https://developers.google.com/maps/documentation/javascript/get-api-key

Google Maps needs to be loaded with the API key in: key Find this API key in the parameters:

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