How TO - Google Maps
Learn how to add a Google Map to a web page.
My First Google Map
Start with a simple basic web page.
Add a <div> element where you want the map to display:
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 size of the map:
Create a JavaScript function to display the map:
Example
function myMap() {
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 »
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.
Add the Google API
The functionality of the map is provided by a JavaScript library located at Google:
Example
<script src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script>
Try it Yourself »
Google Maps Tutorial
Learn more about Google Maps in our Google Maps Tutorial.
