To add a new advanced marker to a map, create a new
AdvancedMarkerElement
,
passing either a
LatLng
or
LatLngAltitude
, and a reference to the basemap,
as shown in this example:
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();
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();
To remove a marker from the map, set either
markerView.map
or
position
to
null
.
Next steps