To add a new default Advanced Marker to a map, create a new AdvancedMarkerView
,
passing either a LatLng
or LatLngAltitude
, and a reference to the basemap,
as shown in this example:
TypeScript
function initMap() { const map = new google.maps.Map(document.getElementById('map') as HTMLElement, { center: { lat: 37.4239163, lng: -122.0947209 }, zoom: 14, mapId: '4504f8b37365c3d0', }); const markerView = new google.maps.marker.AdvancedMarkerView({ map, position: { lat: 37.4239163, lng: -122.0947209 }, }); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
function initMap() { const map = new google.maps.Map(document.getElementById("map"), { center: { lat: 37.4239163, lng: -122.0947209 }, zoom: 14, mapId: "4504f8b37365c3d0", }); const markerView = new google.maps.marker.AdvancedMarkerView({ map, position: { lat: 37.4239163, lng: -122.0947209 }, }); } window.initMap = initMap;
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; } [class$=api-load-alpha-banner] { display: none; }
HTML
<html> <head> <title>Default Advanced Marker</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <div id="map"></div> <!-- The `defer` attribute causes the callback 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 with https://www.npmjs.com/package/@googlemaps/js-api-loader. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=marker,places&v=beta" defer ></script> </body> </html>
Try Sample
To remove a marker from the map, set the markerView.map
property to null
:
markerView.map = null;