Complex Marker Icons

// The following example creates complex markers to indicate beaches near
// Sydney, NSW, Australia. Note that the anchor is set to (0,32) to correspond
// to the base of the flagpole.

functioninitMap():void{
constmap=newgoogle.maps.Map(
document.getElementById("map")asHTMLElement,
{
zoom:10,
center:{lat:-33.9,lng:151.2},
}
);

setMarkers(map);
}

// Data for the markers consisting of a name, a LatLng and a zIndex for the
// order in which these markers should display on top of each other.
constbeaches:[string,number,number,number][]=[
["BondiBeach",-33.890542,151.274856,4],
["CoogeeBeach",-33.923036,151.259052,5],
["CronullaBeach",-34.028249,151.157507,3],
["ManlyBeach",-33.80010128657071,151.28747820854187,2],
["MaroubraBeach",-33.950198,151.259302,1],
];

functionsetMarkers(map:google.maps.Map){
// Adds markers to the map.

// Marker sizes are expressed as a Size of X,Y where the origin of the image
// (0,0) is located in the top left of the image.

// Origins, anchor positions and coordinates of the marker increase in the X
// direction to the right and in the Y direction down.
constimage={
url:"https://developers.google /maps/documentation/javascript/examples/full/images/beachflag.png ",
// This marker is 20 pixels wide by 32 pixels high.
size:newgoogle.maps.Size(20,32),
// The origin for this image is (0, 0).
origin:newgoogle.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at (0, 32).
anchor:newgoogle.maps.Point(0,32),
};
// Shapes define the clickable region of the icon. The type defines an HTML
// <area> element 'poly' which traces out a polygon as a series of X,Y points.
// The final coordinate closes the poly by connecting to the first coordinate.
constshape={
coords:[1,1,1,20,18,20,18,1],
type:"poly",
};

for(leti=0;i<beaches.length;i++){
constbeach=beaches[i];

newgoogle.maps.Marker({
position:{lat:beach[1],lng:beach[2]},
map,
icon:image,
shape:shape,
title:beach[0],
zIndex:beach[3],
});
}
}

declareglobal{
interfaceWindow{
initMap:()=>void;
}
}
window.initMap=initMap;
index.ts

// The following example creates complex markers to indicate beaches near
// Sydney, NSW, Australia. Note that the anchor is set to (0,32) to correspond
// to the base of the flagpole.
functioninitMap(){
constmap=newgoogle.maps.Map(document.getElementById("map"),{
zoom:10,
center:{lat:-33.9,lng:151.2},
});

setMarkers(map);
}

// Data for the markers consisting of a name, a LatLng and a zIndex for the
// order in which these markers should display on top of each other.
constbeaches=[
["BondiBeach",-33.890542,151.274856,4],
["CoogeeBeach",-33.923036,151.259052,5],
["CronullaBeach",-34.028249,151.157507,3],
["ManlyBeach",-33.80010128657071,151.28747820854187,2],
["MaroubraBeach",-33.950198,151.259302,1],
];

functionsetMarkers(map){
// Adds markers to the map.
// Marker sizes are expressed as a Size of X,Y where the origin of the image
// (0,0) is located in the top left of the image.
// Origins, anchor positions and coordinates of the marker increase in the X
// direction to the right and in the Y direction down.
constimage={
url:"https://developers.google /maps/documentation/javascript/examples/full/images/beachflag.png ",
// This marker is 20 pixels wide by 32 pixels high.
size:newgoogle.maps.Size(20,32),
// The origin for this image is (0, 0).
origin:newgoogle.maps.Point(0,0),
// The anchor for this image is the base of the flagpole at (0, 32).
anchor:newgoogle.maps.Point(0,32),
};
// Shapes define the clickable region of the icon. The type defines an HTML
// <area> element 'poly' which traces out a polygon as a series of X,Y points.
// The final coordinate closes the poly by connecting to the first coordinate.
constshape={
coords:[1,1,1,20,18,20,18,1],
type:"poly",
};

for(leti=0;i<beaches.length;i++){
constbeach=beaches[i];

newgoogle.maps.Marker({
position:{lat:beach[1],lng:beach[2]},
map,
icon:image,
shape:shape,
title:beach[0],
zIndex:beach[3],
});
}
}

window.initMap=initMap;
index.js

/*
* 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;
}
style.css

<html>
<head>
<title>Complex Marker Icons</title>

<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 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 /maps/documentation/javascript/load-maps-js-api
for more information.
-->
<script
src= "https://maps.googleapis /maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
defer
></script>
</body>
</html>
index.html