Deleting a Vertex

functioninitialize(){
constmapOptions={
zoom:3,
center:newgoogle.maps.LatLng(0,-180),
mapTypeId:"terrain",
};
constmap=newgoogle.maps.Map(
document.getElementById("map")asHTMLElement,
mapOptions
);
constflightPlanCoordinates=[
newgoogle.maps.LatLng(37.772323,-122.214897),
newgoogle.maps.LatLng(21.291982,-157.821856),
newgoogle.maps.LatLng(-18.142599,178.431),
newgoogle.maps.LatLng(-27.46758,153.027892),
];
constflightPath=newgoogle.maps.Polyline({
path:flightPlanCoordinates,
editable:true,
strokeColor:"#FF0000",
strokeOpacity:1.0,
strokeWeight:2,
map:map,
});
/**
 * A menu that lets a user delete a selected vertex of a path.
 */
classDeleteMenuextendsgoogle.maps.OverlayView{
privatediv_:HTMLDivElement;
privatedivListener_?:google.maps.MapsEventListener;
constructor(){
super();
this.div_=document.createElement("div");
this.div_.className="delete-menu";
this.div_.innerHTML="Delete";
constmenu=this;
google.maps.event.addDomListener(this.div_,"click",()=>{
menu.removeVertex();
});
}
onAdd(){
constdeleteMenu=this;
constmap=this.getMap()asgoogle.maps.Map;
this.getPanes()!.floatPane.appendChild(this.div_);
// mousedown anywhere on the map except on the menu div will close the
// menu.
this.divListener_=google.maps.event.addDomListener(
map.getDiv(),
"mousedown",
(e:Event)=>{
if(e.target!=deleteMenu.div_){
deleteMenu.close();
}
},
true
);
}
onRemove(){
if(this.divListener_){
google.maps.event.removeListener(this.divListener_);
}
(this.div_.parentNodeasHTMLElement).removeChild(this.div_);
// clean up
this.set("position",null);
this.set("path",null);
this.set("vertex",null);
}
close(){
this.setMap(null);
}
draw(){
constposition=this.get("position");
constprojection=this.getProjection();
if(!position||!projection){
return;
}
constpoint=projection.fromLatLngToDivPixel(position)!;
this.div_.style.top=point.y+"px";
this.div_.style.left=point.x+"px";
}
/**
 * Opens the menu at a vertex of a given path.
 */
open(
map:google.maps.Map,
path:google.maps.MVCArray<google.maps.LatLng>,
vertex:number
){
this.set("position",path.getAt(vertex));
this.set("path",path);
this.set("vertex",vertex);
this.setMap(map);
this.draw();
}
/**
 * Deletes the vertex from the path.
 */
removeVertex(){
constpath=this.get("path");
constvertex=this.get("vertex");
if(!path||vertex==undefined){
this.close();
return;
}
path.removeAt(vertex);
this.close();
}
}
constdeleteMenu=newDeleteMenu();
google.maps.event.addListener(flightPath,"contextmenu",(e:any)=>{
// Check if click was on a vertex control point
if(e.vertex==undefined){
return;
}
deleteMenu.open(map,flightPath.getPath(),e.vertex);
});
}
declareglobal{
interfaceWindow{
initialize:()=>void;
}
}
window.initialize=initialize;
index.ts 

functioninitialize(){
constmapOptions={
zoom:3,
center:newgoogle.maps.LatLng(0,-180),
mapTypeId:"terrain",
};
constmap=newgoogle.maps.Map(document.getElementById("map"),mapOptions);
constflightPlanCoordinates=[
newgoogle.maps.LatLng(37.772323,-122.214897),
newgoogle.maps.LatLng(21.291982,-157.821856),
newgoogle.maps.LatLng(-18.142599,178.431),
newgoogle.maps.LatLng(-27.46758,153.027892),
];
constflightPath=newgoogle.maps.Polyline({
path:flightPlanCoordinates,
editable:true,
strokeColor:"#FF0000",
strokeOpacity:1.0,
strokeWeight:2,
map:map,
});
/**
 * A menu that lets a user delete a selected vertex of a path.
 */
classDeleteMenuextendsgoogle.maps.OverlayView{
div_;
divListener_;
constructor(){
super();
this.div_=document.createElement("div");
this.div_.className="delete-menu";
this.div_.innerHTML="Delete";
constmenu=this;
google.maps.event.addDomListener(this.div_,"click",()=>{
menu.removeVertex();
});
}
onAdd(){
constdeleteMenu=this;
constmap=this.getMap();
this.getPanes().floatPane.appendChild(this.div_);
// mousedown anywhere on the map except on the menu div will close the
// menu.
this.divListener_=google.maps.event.addDomListener(
map.getDiv(),
"mousedown",
(e)=>{
if(e.target!=deleteMenu.div_){
deleteMenu.close();
}
},
true,
);
}
onRemove(){
if(this.divListener_){
google.maps.event.removeListener(this.divListener_);
}
this.div_.parentNode.removeChild(this.div_);
// clean up
this.set("position",null);
this.set("path",null);
this.set("vertex",null);
}
close(){
this.setMap(null);
}
draw(){
constposition=this.get("position");
constprojection=this.getProjection();
if(!position||!projection){
return;
}
constpoint=projection.fromLatLngToDivPixel(position);
this.div_.style.top=point.y+"px";
this.div_.style.left=point.x+"px";
}
/**
 * Opens the menu at a vertex of a given path.
 */
open(map,path,vertex){
this.set("position",path.getAt(vertex));
this.set("path",path);
this.set("vertex",vertex);
this.setMap(map);
this.draw();
}
/**
 * Deletes the vertex from the path.
 */
removeVertex(){
constpath=this.get("path");
constvertex=this.get("vertex");
if(!path||vertex==undefined){
this.close();
return;
}
path.removeAt(vertex);
this.close();
}
}
constdeleteMenu=newDeleteMenu();
google.maps.event.addListener(flightPath,"contextmenu",(e)=>{
// Check if click was on a vertex control point
if(e.vertex==undefined){
return;
}
deleteMenu.open(map,flightPath.getPath(),e.vertex);
});
}
window.initialize=initialize;
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;
}
.delete-menu{
position:absolute;
background:white;
padding:3px;
color:#666;
font-weight:bold;
border:1pxsolid#999;
font-family:sans-serif;
font-size:12px;
box-shadow:1px3px3pxrgba(0,0,0,0.3);
margin-top:-10px;
margin-left:10px;
cursor:pointer;
}
.delete-menu:hover{
background:#eee;
}
style.css 

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