How To Add A Google Maps Marker To Your Site

To follow this tutorial you might need a basic understanding of HTML and CSS, and even less knowledge of JavaScript.

Step 1: Create an HTML Page

Here's the code for a basic HTML web page with a map in it:
`

My Google Maps Demo

`

Your map is defined in the area of the code defined as follows:

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

Step 2: Add a map with a marker

Google Maps has a JavaScript API which you are going to load onto your web page.

`

My Google Maps Demo

`

Notice that the above sample no longer contains the CSS that colors the div grey. This is because the div now contains a map.

In the code below, the script loads the API from the specified URL.

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"> </script>

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.

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

{var uluru = {lat: -25.363, lng: 131.044};

var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: ayers
})

; }

In the above code, new google.maps.Map() creates a new Google maps object. The center property tells the API where to center the map. The map coordinates are set in the order: latitude, longitude.

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 into the earth at higher resolutions.

The code below puts a marker on the map. The position property sets the position of the marker.

var marker = new google.maps.Marker({ position: ayers, map: map });

Step 3: Get an API key

Follow these steps to get an API key:

  • Go to the Google API 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, secure your API key following these best practices.
  • 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).
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"> </script>
  • Save this file with a name that ends with .html, like google-maps.html.
  • Load the HTML file in a web browser by dragging it from your desktop onto your browser. Alternatively, double-clicking the file works on most operating systems.

That's all you should need. Please share whatever challenges you may face in the comments section provided below. Thanks for visiting Base64!