THE WORLD'S LARGEST WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

How TO - Google Maps


Learn how to add a Google Map to a web page.


A Basic Web Page

All web page are written in HTML.

To demonstrate how to add a Google Map to a web page, we will use a simple basic web page:

Example

<!DOCTYPE html>
<html>
<body>

<h1>My First Google Map</h1>

<div id="map">My map will go here</div>

</body>
<html>
Try it yourself »

Set the Map Size

Set the size of the map:

Example

<div id="map" style="width:400px;height:400px">
Try it yourself »

Add the Google API

The functionality of the map is provided by a JavaScript library located at Google.

The JavaScript library can be loaded in the <head> section of the HTML page.

Note Actually you can drop the <head> and </head> tags.

Example

<head>
<script src="https://maps.googleapis.com/maps/api/js"></script>
</head>
Try it yourself »

Create the Map Using JavaScript

Finally add the necessary JavaScript to the page:

Example

var mapCanvas = document.getElementById("map");
var mapOptions = {
    center: new google.maps.LatLng(51.5, -0.2), zoom: 10
}
var map = new google.maps.Map(mapCanvas, mapOptions);
Try it yourself »

Example Explained

mapCanvas is the map's HTML element.

mapOptions is the map's options.

The center property gets the latitude and longitude (of London) by calling google.maps.LatLng().

The zoom property is set to 10. (try to experiment with the zoom)

The google.maps.Map object is created with mapCanvas and mapOptions as parameters.

Go to our Google Maps API Tutorial. to learn more about Google Maps.