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

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

Migrate to advanced markers | Maps JavaScript API

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

As of February 21st, 2024 (v3.56), google.maps.Marker is deprecated. We encourage you to transition to the new google.maps.marker.AdvancedMarkerElement class. Advanced markers provide substantial improvements over the legacy google.maps.Marker class.

Learn more about this deprecation

To update a legacy marker to be an advanced marker, take the following steps:

1. Add code to import the marker library. Note that the previous version of markers (google.maps.Marker) does not have this requirement.
2. Change google.maps.Marker to google.maps.marker.AdvancedMarkerElement
3. Add a map ID to your map initialization code. For example mapId: 'DEMO_MAP_ID' for testing purposes if you don't have a map ID already.

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, PinElement } = await google.maps.importLibrary("marker");

• If your web page uses the legacy direct script loading tag, add libraries=marker to the loading script, as shown in the following snippet.

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

Learn more about loading the Maps JavaScript API

The following code examples show code for adding a legacy marker, followed by the code for the same example using advanced markers:

// The location of Uluru
const position = { lat: -25.344, lng: 131.031 };

const map = new google.maps.Map(document.getElementById("map"), {
  zoom: 4,
  center: position,
});

// The marker, positioned at Uluru
const marker = new google.maps.Marker({
  map: map,
  position: position,
  title: 'Uluru',
});

  // The location of Uluru
  const position = { lat: -25.344, lng: 131.031 };

  const map = new google.maps.Map(document.getElementById("map"),  {
    zoom: 4,
    center: position,
    mapId: "DEMO_MAP_ID", // Map ID is required for advanced markers.
  });

    // The advanced marker, positioned at Uluru
    const marker = new google.maps.marker.AdvancedMarkerElement({
        map,
        position: position,
        title: 'Uluru',
    });

Advanced markers can be customized in ways that were not possible before. Now you can adjust the size (scale) of markers, and change the colors of the background, border, and glyph. Custom graphic images are simpler to work with, and it is now possible to compose custom markers using HTML and CSS. Learn more about everything you can do with advanced markers:

• Basic marker customization
• Create markers with graphics
• Create markers with HTML and CSS
• Control collision behavior, altitude, and visibility
• Make markers clickable and accessible

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-09 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-09 UTC."],[[["`google.maps.Marker` is deprecated as of February 21st, 2024 (v3.56) and developers should transition to `google.maps.marker.AdvancedMarkerElement`."],["Advanced markers require adding the marker library, changing the class name, and including a map ID during map initialization."],["Developers can customize advanced markers with features like adjustable size, custom colors, graphic images, and HTML/CSS composition."],["Several resources are available to learn more about advanced marker features such as basic customization, graphic markers, HTML/CSS markers, collision behavior, and accessibility."]]],["Google's `google.maps.Marker` is deprecated as of February 21st, 2024, in favor of `google.maps.marker.AdvancedMarkerElement`. To migrate, import the marker library, replace `google.maps.Marker` with the new class, and add a map ID to map initialization code (e.g., `mapId: 'DEMO_MAP_ID'`). Load the library dynamically with `google.maps.importLibrary(\"marker\")` or add `libraries=marker` to the script tag. Advanced markers offer enhanced customization, including size, color, and HTML/CSS-based designs.\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