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 upthis.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 pointif(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 upthis.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 pointif(e.vertex==undefined){return;}deleteMenu.open(map,flightPath.getPath(),e.vertex);});}window.initialize=initialize;
index.js

<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></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