RetroSearch Browse

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

Showing content from https://developers.google.com/maps/documentation/javascript/advanced-markers/add-marker below:

Add a marker to a map | Maps JavaScript API

Skip to main content Add a marker to a map

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

Use markers to display single locations on a map. This page shows how to add a marker to a map programmatically, and by using custom HTML elements.

Load the advanced marker library

In order to add an advanced marker to a map, your map code must load the marker library, which provides the AdvancedMarkerElement and PinElement classes. This applies whether your app loads markers programmatically or by using HTML. To do this, your app must first load the Maps JavaScript API.

The method you use for loading libraries depends on how your web page loads the Maps JavaScript API.

If your web page uses dynamic script loading, add the markers library and import AdvancedMarkerElement (and optionally PinElement) at runtime, as shown here.
```
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
```
If your web page uses the direct script loading tag, add libraries=marker to the loading script, as shown in the following snippet. Doing this will cause both AdvancedMarkerElement and PinElement to be imported.
```
<script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&v=weekly&libraries=marker"
defer
></script>
```

Add a marker using custom HTML elements Note: Some frameworks like React will automatically add and remove DOM nodes during rendering, and may be incompatible with adding and removing markers' corresponding DOM nodes independently (e.g. when using Maps JavaScript API constructors and properties). In such frameworks if you intend to use other marker-managing code or libraries, you may need to add and remove markers solely using JavaScript syntax (e.g. new AdvancedMarker({map})).

To add an advanced marker by using custom HTML elements, add a gmp-advanced-marker child element to the gmp-map element. The following snippet shows adding markers to a web page:

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

See the complete example source code

This example shows creating a map with markers using HTML.

TypeScript

// This example adds a map with markers, using web components.
async function initMap(): Promise<void> {
    console.log('Maps JavaScript API loaded.');
}
declare global {
    interface Window {
      initMap: () => void;
    }
  }
window.initMap = initMap;

Note: Read the guide on using TypeScript and Google Maps. JavaScript

// This example adds a map with markers, using web components.
async function initMap() {
  console.log("Maps JavaScript API loaded.");
}

window.initMap = initMap;

Note: The JavaScript is compiled from the TypeScript snippet. 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;
}

gmp-map {
  height: 400px;
}

HTML

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

Try Sample Add a marker programmatically

To add an advanced marker to a map programmatically, create a new AdvancedMarkerElement, passing either a LatLng or LatLngAltitude, and a reference to the basemap, as shown in this example:

  const marker = new AdvancedMarkerElement({
      map,
      position: { lat: 37.4239163, lng: -122.0947209 },
  });

To remove a marker from the map, set either markerView.map or position to null.

See the complete example source code

This example shows how to add a marker to a map.

TypeScript

async function initMap() {
    // Request needed libraries.
    const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
    const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

    const map = new Map(document.getElementById('map') as HTMLElement, {
        center: { lat: 37.4239163, lng: -122.0947209 },
        zoom: 14,
        mapId: '4504f8b37365c3d0',
    });

    const marker = new AdvancedMarkerElement({
        map,
        position: { lat: 37.4239163, lng: -122.0947209 },
    });
}
initMap();

Note: Read the guide on using TypeScript and Google Maps. JavaScript

async function initMap() {
    // Request needed libraries.
    const { Map } = await google.maps.importLibrary("maps");
    const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
    const map = new Map(document.getElementById('map'), {
        center: { lat: 37.4239163, lng: -122.0947209 },
        zoom: 14,
        mapId: '4504f8b37365c3d0',
    });
    const marker = new AdvancedMarkerElement({
        map,
        position: { lat: 37.4239163, lng: -122.0947209 },
    });
}
initMap();

Note: The JavaScript is compiled from the TypeScript snippet. 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>Default Advanced Marker</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
  </body>
</html>

Try Sample Next steps

Basic marker customization

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-16 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-16 UTC."],[[["Markers can be used to pinpoint single locations on a map and can be added programmatically or using HTML."],["To use advanced markers, you must load the `marker` library, which provides the `AdvancedMarkerElement` and `PinElement` classes."],["Adding markers using HTML involves inserting `\u003cgmp-advanced-marker\u003e` elements within a `\u003cgmp-map\u003e` element."],["Markers can be added programmatically by creating an `AdvancedMarkerElement` and specifying its position and map."],["For basic marker customizations, refer to the provided link for detailed guidance."]]],["This content explains how to add advanced markers to a map, either using HTML or programmatically with JavaScript. Key actions include: loading the `marker` library, which provides `AdvancedMarkerElement` and `PinElement` classes, using the correct method depending on if the web page uses dynamic or direct script loading. HTML users add `\u003cgmp-advanced-marker\u003e` elements within `\u003cgmp-map\u003e` to define positions and titles. Programmatically, `AdvancedMarkerElement` is created, specifying the map and position. Markers can be removed by setting the `map` or `position` to null.\n"]]

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