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