Introduction
Adding a Google Map to your web page is very easy, once you've been shown how! That's what we're going to do in this lesson - we'll go over each step of creating a basic Google Map using the JavaScript API.
From there, it's only a matter of tweaking some of the options to customize the map to your liking; you can go even further by reading more of the Maps API tutorials, or by reading the Developer's Guide.
What you'll need
You don't need much to create a Google Maps API webpage:
- A text editor. Windows machines generally include Notepad; Mac OS X comes with TextEdit; Linux machines come with a variety of applications, including gedit, vim, or KWrite.
- A web browser. There are many well-known web browsers available for various platforms: Google Chrome, Firefox, Safari, and Internet Explorer are some of the best-known options.
Try it out
The basic HTML page
Because everything on the web is made up of HTML, we'll start there. The following code creates the simplest of web pages:
<!DOCTYPE html>
<html>
<head></head>
<body>
</body>
</html>
None of this is specific to Google Maps - it's the basis for any HTML page. Open your text editor and add this code, then save the file to your desktop as google-maps.html (or any other filename that ends with .html).
Your Google Map requires a page element in which to appear; add a div tag to
the body with an id attribute of map. This creates a container that
we'll reference later in the lesson.
<!DOCTYPE html>
<html>
<head></head>
<body>
<div id="map"></div>
</body>
</html>
Set the width and height of the div element using CSS. By default, a div
has a height of 0, meaning that any map you place inside it won't be visible.
Use a style tag in the head to set the map to any size; in this case 500
pixels wide and 400 pixels high.
<!DOCTYPE html>
<html>
<head>
<style>
#map {
width: 500px;
height: 400px;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
</html>
Load the HTML file in a web browser by dragging it from your desktop into the
address bar of your browser. You'll notice that nothing is displayed - there's
nothing in the div yet. If you'd like to see the div on your page, add a
background-color CSS declaration to your existing <style> tag:
<style>
#map {
width: 500px;
height: 400px;
background-color: #CCC;
}
</style>
Reloading the page will display a grey box; that's your div.
To bring forth a map, you must add two pieces of JavaScript to your page. The first loads the Google Maps JavaScript API; the second creates and configures the map.
Loading the API
Load the Google Maps API by adding a <script> tag to the end of the <body>
section of your HTML. This script downloads the code required to display maps
on your page and will not block the loading of other resources.
<!DOCTYPE html>
<html>
<head>
<style>
#map {
width: 500px;
height: 400px;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js"
async defer></script>
</body>
</html>
Create and configure the map
The final piece of code is the JavaScript that creates the map. The code
contains a function to run once the page has loaded. In this example,
and all of the examples in the Maps API documentation, this function is named
initMap.
<script>
function initMap() {}
</script>
Add this code immediately before the <script> tag you created in the last
step.
The google.maps.Map object
The first thing the initMap function needs to do is create a new Google
Maps object:
var map = new google.maps.Map();
The Map object constructor takes two arguments:
-
A reference to the div that the map will be loaded into. We use the JavaScript
getElementByIdfunction to obtain this.<script> function initMap() { var mapDiv = document.getElementById('map'); var map = new google.maps.Map(mapDiv); } </script> -
Options for the map, such as the center, zoom level, and the map type. There are many more options that can be set, but these three are required.
<script> function initMap() { var mapDiv = document.getElementById('map'); var map = new google.maps.Map(mapDiv, { center: {lat: 44.540, lng: -78.546}, zoom: 8 }); } </script>centeris a Google MapsLatLngLiteralobject that tells the the API where to center the map.zoomis a number between 0 (farthest) and 22 that sets the zoom level of the map.
Executing the JavaScript function
Add a callback to the <script> tag loading the API that will call the initMap
function after the API has loaded. Calling initmap before the API has
finished loading will cause problems, since the methods and functions may not
have been initialized yet. The callback waits until the <script> finishes
loading before calling initMap.
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
async defer></script>
The finished code
This is the final code you've put together in this lesson. It:
- Creates a div, and gives it a size.
- Loads the Google Maps JavaScript API.
- Creates and displays a Google Map in the div.
<!DOCTYPE html>
<html>
<head>
<style>
#map {
width: 500px;
height: 400px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var mapDiv = document.getElementById('map');
var map = new google.maps.Map(mapDiv, {
center: {lat: 44.540, lng: -78.546},
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
async defer></script>
</body>
</html>
Need help? Visit our