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:
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.
 |
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.
