Adding a Google Map with a Marker to Your Website

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.
For an advanced guide to creating maps, read the
developer's guide.

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.

The section below displays the entire code you need to create the map in this
tutorial.

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. Apply
background-color: grey to the div to view the area for
your map on the web page.

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

In the above code, the callback parameter executes the
initMap function after the API loads. The async
attribute allows the browser to continue rendering the rest of your page while
the API loads. The key parameter contains your API key. You don't
need your own API key when experimenting with this tutorial
in JSFiddle.
See Step 3: Get an API key for instructions on getting your
own API key later.

The code below contains the initMap function that initializes and
adds the map when the web page loads. Use a script tag to include
your own JavaScript which contains the initMap function.

<script>
function initMap() {
}
</script>

Add the getElementById() function to find the map div
on the web page.

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.

Copy the entire code of this tutorial from this page, to your text editor.
If you don't already have a text editor, here are some recommendations:
You can use: Notepad++ (for Windows); TextEdit (for macOS);
gedit, KWrite, among others (for Linux machines).

Replace the value of the key parameter in the URL with your own API key
(that's the API key that you've just obtained).