Custom Popups

letmap:google.maps.Map,popup,Popup;
/** Initializes the map and the custom popup. */
functioninitMap():void{
map=newgoogle.maps.Map(document.getElementById("map")asHTMLElement,{
center:{lat:-33.9,lng:151.1},
zoom:10,
});
/**
 * A customized popup on the map.
 */
classPopupextendsgoogle.maps.OverlayView{
position:google.maps.LatLng;
containerDiv:HTMLDivElement;
constructor(position:google.maps.LatLng,content:HTMLElement){
super();
this.position=position;
content.classList.add("popup-bubble");
// This zero-height div is positioned at the bottom of the bubble.
constbubbleAnchor=document.createElement("div");
bubbleAnchor.classList.add("popup-bubble-anchor");
bubbleAnchor.appendChild(content);
// This zero-height div is positioned at the bottom of the tip.
this.containerDiv=document.createElement("div");
this.containerDiv.classList.add("popup-container");
this.containerDiv.appendChild(bubbleAnchor);
// Optionally stop clicks, etc., from bubbling up to the map.
Popup.preventMapHitsAndGesturesFrom(this.containerDiv);
}
/** Called when the popup is added to the map. */
onAdd(){
this.getPanes()!.floatPane.appendChild(this.containerDiv);
}
/** Called when the popup is removed from the map. */
onRemove(){
if(this.containerDiv.parentElement){
this.containerDiv.parentElement.removeChild(this.containerDiv);
}
}
/** Called each frame when the popup needs to draw itself. */
draw(){
constdivPosition=this.getProjection().fromLatLngToDivPixel(
this.position
)!;
// Hide the popup when it is far out of view.
constdisplay=
Math.abs(divPosition.x) < 4000 && Math.abs(divPosition.y) < 4000
?"block"
:"none";
if(display==="block"){
this.containerDiv.style.left=divPosition.x+"px";
this.containerDiv.style.top=divPosition.y+"px";
}
if(this.containerDiv.style.display!==display){
this.containerDiv.style.display=display;
}
}
}
popup=newPopup(
newgoogle.maps.LatLng(-33.866,151.196),
document.getElementById("content")asHTMLElement
);
popup.setMap(map);
}
declareglobal{
interfaceWindow{
initMap:()=>void;
}
}
window.initMap=initMap;
index.ts 

letmap,popup,Popup;
/** Initializes the map and the custom popup. */
functioninitMap(){
map=newgoogle.maps.Map(document.getElementById("map"),{
center:{lat:-33.9,lng:151.1},
zoom:10,
});
/**
 * A customized popup on the map.
 */
classPopupextendsgoogle.maps.OverlayView{
position;
containerDiv;
constructor(position,content){
super();
this.position=position;
content.classList.add("popup-bubble");
// This zero-height div is positioned at the bottom of the bubble.
constbubbleAnchor=document.createElement("div");
bubbleAnchor.classList.add("popup-bubble-anchor");
bubbleAnchor.appendChild(content);
// This zero-height div is positioned at the bottom of the tip.
this.containerDiv=document.createElement("div");
this.containerDiv.classList.add("popup-container");
this.containerDiv.appendChild(bubbleAnchor);
// Optionally stop clicks, etc., from bubbling up to the map.
Popup.preventMapHitsAndGesturesFrom(this.containerDiv);
}
/** Called when the popup is added to the map. */
onAdd(){
this.getPanes().floatPane.appendChild(this.containerDiv);
}
/** Called when the popup is removed from the map. */
onRemove(){
if(this.containerDiv.parentElement){
this.containerDiv.parentElement.removeChild(this.containerDiv);
}
}
/** Called each frame when the popup needs to draw itself. */
draw(){
constdivPosition=this.getProjection().fromLatLngToDivPixel(
this.position,
);
// Hide the popup when it is far out of view.
constdisplay=
Math.abs(divPosition.x) < 4000 && Math.abs(divPosition.y) < 4000
?"block"
:"none";
if(display==="block"){
this.containerDiv.style.left=divPosition.x+"px";
this.containerDiv.style.top=divPosition.y+"px";
}
if(this.containerDiv.style.display!==display){
this.containerDiv.style.display=display;
}
}
}
popup=newPopup(
newgoogle.maps.LatLng(-33.866,151.196),
document.getElementById("content"),
);
popup.setMap(map);
}
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;
}
/* The popup bubble styling. */
.popup-bubble{
/* Position the bubble centred-above its parent. */
position:absolute;
top:0;
left:0;
transform:translate(-50%,-100%);
/* Style the bubble. */
background-color:white;
padding:5px;
border-radius:5px;
font-family:sans-serif;
overflow-y:auto;
max-height:60px;
box-shadow:0px2px10px1pxrgba(0,0,0,0.5);
}
/* The parent of the bubble. A zero-height div at the top of the tip. */
.popup-bubble-anchor{
/* Position the div a fixed distance above the tip. */
position:absolute;
width:100%;
bottom:8px;
left:0;
}
/* This element draws the tip. */
.popup-bubble-anchor::after{
content:"";
position:absolute;
top:0;
left:0;
/* Center the tip horizontally. */
transform:translate(-50%,0);
/* The tip is a https://css-tricks.com/snippets/css/css-triangle/ */
width:0;
height:0;
/* The tip is 8px high, and 12px wide. */
border-left:6pxsolidtransparent;
border-right:6pxsolidtransparent;
border-top:8pxsolidwhite;
}
/* JavaScript will position this div at the bottom of the popup tip. */
.popup-container{
cursor:auto;
height:0;
position:absolute;
/* The max width of the info window. */
width:200px;
}
style.css 

<html>
 <head>
 <title>Custom Popups</title>
 <link rel="stylesheet" type="text/css" href="./style.css" />
 <script type="module" src="./index.js"></script>
 </head>
 <body>
 <div id="map"></div>
 <div id="content">Hello world!</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.com/maps/documentation/javascript/load-maps-js-api
 for more information.
 -->
 <script
 src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
 defer
 ></script>
 </body>
</html>
index.html