Introduction
This tutorial shows you how to add a simple Google map with a marker to a web
page. It suits people with beginner or intermediate knowledge of HTML and CSS,
and a little knowledge of JavaScript.
Below is the map you'll create using this tutorial. The marker is positioned at
Uluru
(also known as Ayers Rock) in the
Uluru-Kata Tjuta National Park.
TypeScript
// Initialize and add the map
let map;
async function initMap(): Promise<void> {
// The location of Uluru
const position = { lat: -25.344, lng: 131.031 };
// Request needed libraries.
//@ts-ignore
const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
// The map, centered at Uluru
map = new Map(
document.getElementById('map') as HTMLElement,
{
zoom: 4,
center: position,
mapId: 'DEMO_MAP_ID',
}
);
// The marker, positioned at Uluru
const marker = new AdvancedMarkerElement({
map: map,
position: position,
title: 'Uluru'
});
}
initMap();
JavaScript
// Initialize and add the map
let map;
async function initMap() {
// The location of Uluru
const position = { lat: -25.344, lng: 131.031 };
// Request needed libraries.
//@ts-ignore
const { Map } = await google.maps.importLibrary("maps");
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
// The map, centered at Uluru
map = new Map(document.getElementById("map"), {
zoom: 4,
center: position,
mapId: "DEMO_MAP_ID",
});
// The marker, positioned at Uluru
const marker = new AdvancedMarkerElement({
map: map,
position: position,
title: "Uluru",
});
}
initMap();
CSS
/*
* Always set the map height explicitly to define the size of the div element
* that contains the map.
*/
#map {
height: 100%;
}
/*
* Optional: Makes the sample page fill the window.
*/
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
HTML
<html>
<head>
<title>Add Map</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
</head>
<body>
<h3>My Google Maps Demo</h3>
<!--The div element for the map -->
<div id="map"></div>
<!-- prettier-ignore -->
<script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script>
</body>
</html>
Try Sample
Getting started
There are three steps to creating a Google map with a marker on your web page:
- Get an API key
- Create an HTML page
- Add a map with a marker
You need a web browser. Choose a well-known one like Google Chrome
(recommended), Firefox, Safari or Edge, based on your platform from the
list of supported browsers
.
Step 1: Get an API key
This section explains how to authenticate your app to the
Maps JavaScript API using your own API key.
Follow these steps to get an API key:
Go to the
Google Cloud Console
.
Create or select a project.
Click
Continue
to enable the API and any related services.
On the
Credentials
page, get an
API key
(and set the API key
restrictions). Note: If you have an existing unrestricted API key, or a key
with browser restrictions, you may use that key.
To prevent quota theft and secure your API key, see
Using API Keys
.
Enable billing. See
Usage and Billing
for more information.
Once you've got an API key, add it to the following snippet by clicking
"YOUR_API_KEY". Copy and paste the bootloader script tag to use on your own
web page.
<script>
(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
key: "
YOUR_API_KEY
",
v: "weekly",
// Use the 'v' parameter to indicate the
version
to use (weekly, beta, alpha, etc.).
// Add other
bootstrap parameters
as needed, using camel case.
});
</script>
style="height: 400px"
Step 2: Create an HTML page
Here's the code for a basic HTML web page:
<!doctype html>
<!--
@license
Copyright 2019 Google LLC. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
-->
<html>
<head>
<title>Add Map</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script type="module" src="./index.js"></script>
</head>
<body>
<h3>My Google Maps Demo</h3>
<!--The div element for the map -->
<div id="map"></div>
<!-- prettier-ignore -->
<script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script>
</body>
</html>
Note that this is a very basic page with a heading level three (
h3
) and a
single
div
element. You can add any content you like to the web page.
Understand the code
The code below creates an HTML page consisting of a head and a body.
<html>
<head>
</head>
<body>
</body>
</html>
You can add a heading level three above the map using the code below.
<h3>My Google Maps Demo</h3>
The code below defines an area of the page for your Google map.
<!--The div element for the map -->
<div id="map"></div>
At this stage of the tutorial, the
div
appears as just a grey block, because
you have not yet added a map. The code below describes the CSS that sets the
size and color of the
div
.
/* Set the size of the div element that contains the map */
#map {
height: 400px; /* The height is 400 pixels */
width: 100%; /* The width is the width of the web page */
}
In the above code, the
style
element sets the
div
size for your map. Set the
div
width and height to greater than 0px for the map to be visible. In this
case, the
div
is set to a height of 400 pixels, and width of 100% to display
the across the width of your web page.
The bootstrap loader prepares the Maps JavaScript API for loading
(no libraries are loaded until
importLibrary()
is called).
<script>
(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
key: "
YOUR_API_KEY
",
v: "weekly",
// Use the 'v' parameter to indicate the
version
to use (weekly, beta, alpha, etc.).
// Add other
bootstrap parameters
as needed, using camel case.
});
</script>
See
Step 3: Get an API key
for instructions on getting your
own API key.
Step 3: Add a map with a marker
This section shows you how to load the Maps JavaScript API into your
web page, and how to write your own JavaScript that uses the API to add a map
with a marker on it.
TypeScript
// Initialize and add the map
let map;
async function initMap(): Promise<void> {
// The location of Uluru
const position = { lat: -25.344, lng: 131.031 };
// Request needed libraries.
//@ts-ignore
const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
// The map, centered at Uluru
map = new Map(
document.getElementById('map') as HTMLElement,
{
zoom: 4,
center: position,
mapId: 'DEMO_MAP_ID',
}
);
// The marker, positioned at Uluru
const marker = new AdvancedMarkerElement({
map: map,
position: position,
title: 'Uluru'
});
}
initMap();
JavaScript
// Initialize and add the map
let map;
async function initMap() {
// The location of Uluru
const position = { lat: -25.344, lng: 131.031 };
// Request needed libraries.
//@ts-ignore
const { Map } = await google.maps.importLibrary("maps");
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
// The map, centered at Uluru
map = new Map(document.getElementById("map"), {
zoom: 4,
center: position,
mapId: "DEMO_MAP_ID",
});
// The marker, positioned at Uluru
const marker = new AdvancedMarkerElement({
map: map,
position: position,
title: "Uluru",
});
}
initMap();
In the above code, the
Map
and
AdvancedMarkerView
libraries are loaded when
the
initMap()
function is called.
Understanding the code
The code below constructs a new Google maps object, and adds properties to the
map including the center and zoom level. See the documentation for
other property
options
.
TypeScript
// The location of Uluru
const position = { lat: -25.344, lng: 131.031 };
// Request needed libraries.
//@ts-ignore
const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
// The map, centered at Uluru
map = new Map(
document.getElementById('map') as HTMLElement,
{
zoom: 4,
center: position,
mapId: 'DEMO_MAP_ID',
}
);
JavaScript
// The location of Uluru
const position = { lat: -25.344, lng: 131.031 };
// Request needed libraries.
//@ts-ignore
const { Map } = await google.maps.importLibrary("maps");
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
// The map, centered at Uluru
map = new Map(document.getElementById("map"), {
zoom: 4,
center: position,
mapId: "DEMO_MAP_ID",
});
In the above code,
new Map()
creates a new Google maps object. The
center
property tells the API where to center the map.
Learn more about
getting latitude/longitude coordinates,
or converting an address into geographical coordinates.
The
zoom
property specifies the zoom level for the map. Zoom: 0 is the lowest
zoom, and displays the entire Earth. Set the zoom value higher to zoom in to the
Earth at higher resolutions.
The code below puts a marker on the map. The
position
property sets the
position of the marker.
TypeScript
// The marker, positioned at Uluru
const marker = new AdvancedMarkerElement({
map: map,
position: position,
title: 'Uluru'
});
JavaScript
// The marker, positioned at Uluru
const marker = new AdvancedMarkerElement({
map: map,
position: position,
title: "Uluru",
});
Learn more about markers:
Tips and troubleshooting
- You can tweak options like style and properties to customize the map. For
more information on customizing maps, read the guides to
styling
, and
drawing on the map
.
- Use the
Developer Tools Console
in your web browser to test and run your
code, read error reports and solve problems with your code.
- Use the following keyboard shortcuts to open the console in Chrome:
Command+Option+J (on Mac), or Control+Shift+J (on Windows).
Follow the steps below to get the latitude and
longitude coordinates for a location on Google Maps.
- Open Google Maps in a browser.
- Right-click the exact location on the map for which you require
coordinates.
- Select
What's here
from the context menu that appears.
The map displays a card at the bottom of the screen. Find the latitude
and longitude coordinates in the last row of the card.
You can convert an address into latitude and longitude coordinates using the
Geocoding service. The developer guides provide detailed information on
getting started with the Geocoding service
.