RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developers.google.com/maps/documentation/javascript/add-google-map-wc-tut below:

Add a Google Map with Markers using HTML | Maps JavaScript API

Add a Google Map with Markers using HTML

Stay organized with collections Save and categorize content based on your preferences.

Introduction

This tutorial shows you how to add a Google map with a marker to a web page using custom HTML elements. Here is the map you'll create using this tutorial. Two markers are positioned, one in Mountain View, CA, and one in Seattle, WA.

Get started

These are the steps we'll cover for creating a Google map with a marker using HTML:

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.
You are now ready to use your API key.

Step 2: Create HTML, CSS, and JS

Here's the code for a basic HTML web page:

<html>
  <head>
    <title>Add a Map with Markers using HTML</title>

    <!-- TODO: Add bootstrap script tag. -->
  </head>
  <body>
    <!-- TODO: Add a map with markers. -->
  </body>
</html>

In order to load a map, you must add a script tag containing the bootstrap loader for the Maps JavaScript API, as shown in the following snippet (add your own API key):

<script
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=maps,marker"
    defer
></script>

Spoiler alert: Try the finished example on JSFiddle.

Step 3: Add a map

To add a Google map to the page, copy the gmp-map HTML element and paste it within the body of the HTML page:

<gmp-map center="37.4220656,-122.0840897" zoom="10" map-id="DEMO_MAP_ID" style="height: 400px"></gmp-map>

This results in the following map:

The map you just created is centered on the San Jose metropolitan area.

Step 4: Add a marker

To add a marker to the map, use the gmp-advanced-marker HTML element. Copy the following snippet, and paste over the entire gmp-map you added in the previous step.

<gmp-map
  center="43.4142989,-124.2301242"
  zoom="4"
  map-id="DEMO_MAP_ID"
  style="height: 400px"
>
  <gmp-advanced-marker
    position="37.4220656,-122.0840897"
    title="Mountain View, CA"
  ></gmp-advanced-marker>
  <gmp-advanced-marker
    position="47.648994,-122.3503845"
    title="Seattle, WA"
  ></gmp-advanced-marker>
</gmp-map>

The preceding code adds two markers and changes the zoom and center parameters on the gmp-map to better show those markers. A map ID is required to use Advanced Markers (DEMO_MAP_ID is fine to use).

Tips and troubleshooting

You can customize the map with custom styling.
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.
1. Open Google Maps in a browser.
2. Right-click the exact location on the map for which you require coordinates.
3. 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.

Full example code

Following is the final map, and full example code that was used for this tutorial.

<html>
  <head>
    <title>Add a Map with Markers using HTML</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <gmp-map
      center="43.4142989,-124.2301242"
      zoom="4"
      map-id="DEMO_MAP_ID"
      style="height: 400px"
    >
      <gmp-advanced-marker
        position="37.4220656,-122.0840897"
        title="Mountain View, CA"
      ></gmp-advanced-marker>
      <gmp-advanced-marker
        position="47.648994,-122.3503845"
        title="Seattle, WA"
      ></gmp-advanced-marker>
    </gmp-map>

    <!-- 
      The `defer` attribute causes the script to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises. See
      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&libraries=maps,marker&v=beta"
      defer
    ></script>
  </body>
</html>

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

Last updated 2025-07-15 UTC.

[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-07-15 UTC."],[[["This tutorial demonstrates how to add a Google map with markers to a webpage using HTML and the Maps JavaScript API."],["You will need to obtain an API key from the Google Cloud console and enable billing for the project."],["The tutorial provides code snippets for creating the HTML structure, adding the map, and placing markers at specific locations."],["Customization options are available, such as custom styling and using the Geocoding service to convert addresses into coordinates."]]],[]]

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4