This example demonstrates how a user can delete a vertex, or a point on the line, by right-clicking on a vertex to show a "Delete" menu.
TypeScript
function initialize () { const mapOptions = { zoom : 3 , center : new google . maps . LatLng ( 0 , - 180 ), mapTypeId : "terrain" , }; const map = new google . maps . Map ( document . getElementById ( "map" ) as HTMLElement , mapOptions ); const flightPlanCoordinates = [ new google . maps . LatLng ( 37.772323 , - 122.214897 ), new google . maps . LatLng ( 21.291982 , - 157.821856 ), new google . maps . LatLng ( - 18.142599 , 178.431 ), new google . maps . LatLng ( - 27.46758 , 153.027892 ), ]; const flightPath = new google . 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. */ class DeleteMenu extends google . maps . OverlayView { private div_ : HTMLDivElement ; private divListener_? : google.maps.MapsEventListener ; constructor () { super (); this . div_ = document . createElement ( "div" ); this . div_ . className = "delete-menu" ; this . div_ . innerHTML = "Delete" ; const menu = this ; google . maps . event . addDomListener ( this . div_ , "click" , () = > { menu . removeVertex (); }); } onAdd () { const deleteMenu = this ; const map = this . getMap () as google . 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_ . parentNode as HTMLElement ). removeChild ( this . div_ ); // clean up this . set ( "position" , null ); this . set ( "path" , null ); this . set ( "vertex" , null ); } close () { this . setMap ( null ); } draw () { const position = this . get ( "position" ); const projection = this . getProjection (); if ( ! position || ! projection ) { return ; } const point = 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 () { const path = this . get ( "path" ); const vertex = this . get ( "vertex" ); if ( ! path || vertex == undefined ) { this . close (); return ; } path . removeAt ( vertex ); this . close (); } } const deleteMenu = new DeleteMenu (); 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 ); }); } declare global { interface Window { initialize : () = > void ; } } window . initialize = initialize ;
JavaScript
function initialize () { const mapOptions = { zoom : 3 , center : new google . maps . LatLng ( 0 , - 180 ), mapTypeId : "terrain" , }; const map = new google . maps . Map ( document . getElementById ( "map" ), mapOptions ); const flightPlanCoordinates = [ new google . maps . LatLng ( 37.772323 , - 122.214897 ), new google . maps . LatLng ( 21.291982 , - 157.821856 ), new google . maps . LatLng ( - 18.142599 , 178.431 ), new google . maps . LatLng ( - 27.46758 , 153.027892 ), ]; const flightPath = new google . 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. */ class DeleteMenu extends google . maps . OverlayView { div_ ; divListener_ ; constructor () { super (); this . div_ = document . createElement ( "div" ); this . div_ . className = "delete-menu" ; this . div_ . innerHTML = "Delete" ; const menu = this ; google . maps . event . addDomListener ( this . div_ , "click" , () = > { menu . removeVertex (); }); } onAdd () { const deleteMenu = this ; const map = 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 () { const position = this . get ( "position" ); const projection = this . getProjection (); if ( ! position || ! projection ) { return ; } const point = 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 () { const path = this . get ( "path" ); const vertex = this . get ( "vertex" ); if ( ! path || vertex == undefined ) { this . close (); return ; } path . removeAt ( vertex ); this . close (); } } const deleteMenu = new DeleteMenu (); 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 ;
CSS
/* * 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 : 3 px ; color : #666 ; font-weight : bold ; border : 1 px solid #999 ; font-family : sans-serif ; font-size : 12 px ; box-shadow : 1 px 3 px 3 px rgba ( 0 , 0 , 0 , 0.3 ); margin-top : -10 px ; margin-left : 10 px ; cursor : pointer ; } . delete-menu : hover { background : #eee ; }
HTML
<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>
Try Sample
Clone Sample
Git and Node.js are required to run this sample locally. Follow these instructions to install Node.js and NPM. The following commands clone, install dependencies and start the sample application.
git clone - b sample - delete - vertex - menu https : //github.com/googlemaps/js-samples.gitcd js - samplesnpm inpm start
Other samples can be tried by switching to any branch beginning with sample- SAMPLE_NAME
.
git checkout sample - SAMPLE_NAMEnpm inpm start
