/**
* @license
* Copyright 2019 Google LLC. All Rights Reserved.
* SPDX-License-Identifier: Apache-2.0
*/
// [START maps_advanced_markers_graphics]
async function initMap() {
// Request needed libraries.
const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary;
const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
const { Place } = await google.maps.importLibrary("places") as google.maps.PlacesLibrary;
const map = new Map(document.getElementById('map') as HTMLElement, {
center: { lat: 37.42475, lng: -122.0845 },
zoom: 13,
mapId: '4504f8b37365c3d0',
});
// [START maps_advanced_markers_graphics_inline]
const parser = new DOMParser();
// A marker with a custom inline SVG.
const pinSvgString = '';
const pinSvg =
parser.parseFromString(pinSvgString, 'image/svg+xml').documentElement;
const pinSvgMarkerView = new AdvancedMarkerElement({
map,
position: { lat: 37.42475, lng: -122.094 },
content: pinSvg,
title: 'A marker using a custom SVG image.',
});
// [END maps_advanced_markers_graphics_inline]
// [START maps_advanced_markers_graphics_png]
// A marker with a with a URL pointing to a PNG.
const beachFlagImg = document.createElement('img');
beachFlagImg.src = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
const beachFlagMarkerView = new AdvancedMarkerElement({
map,
position: { lat: 37.434, lng: -122.082 },
content: beachFlagImg,
title: 'A marker using a custom PNG Image',
});
// [END maps_advanced_markers_graphics_png]
// [START maps_advanced_markers_graphics_svg_glyph]
// A marker with a custom SVG glyph.
const glyphImg = document.createElement('img');
glyphImg.src = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/google_logo_g.svg';
const glyphSvgPinElement = new PinElement({
glyph: glyphImg,
});
const glyphSvgMarkerView = new AdvancedMarkerElement({
map,
position: { lat: 37.425, lng: -122.07 },
content: glyphSvgPinElement.element,
title: "A marker using a custom SVG for the glyph.",
});
// [END maps_advanced_markers_graphics_svg_glyph]
// [START maps_advanced_markers_graphics_place_icon]
// A marker customized using a place icon and color, name, and geometry.
const place = new Place({
id: 'ChIJN5Nz71W3j4ARhx5bwpTQEGg',
});
// Call fetchFields, passing the desired data fields.
await place.fetchFields({ fields: ['location', 'displayName', 'svgIconMaskURI', 'iconBackgroundColor'] });
const pinElement = new PinElement({
background: place.iconBackgroundColor,
glyph: new URL(String(place.svgIconMaskURI)),
});
const placeIconMarkerView = new AdvancedMarkerElement({
map,
position: place.location,
content: pinElement.element,
title: place.displayName,
});
// [END maps_advanced_markers_graphics_place_icon]
// [START maps_advanced_markers_graphics_fontawesome]
// A marker using a Font Awesome icon for the glyph.
const icon = document.createElement('div');
icon.innerHTML = '';
const faPin = new PinElement({
glyph: icon,
glyphColor: '#ff8300',
background: '#FFD514',
borderColor: '#ff8300',
});
const faMarker = new AdvancedMarkerElement({
map,
position: { lat: 37.412, lng: -122.095829650878 },
content: faPin.element,
title: 'A marker using a FontAwesome icon for the glyph.'
});
// [END maps_advanced_markers_graphics_fontawesome]
}
initMap();
// [END maps_advanced_markers_graphics]
export { };