It's the 15th anniversary of Google Maps Platform - Check out the latest news and announcements

Adding Controls to the Map

This example demonstrates vertex deletion. Right-click on a vertex to show a "Delete" menu.

Read the documentation.

JavaScript

function initialize() {
  var mapOptions = {
    zoom: 3,
    center: new google.maps.LatLng(0, -180),
    mapTypeId: "terrain"
  };

  var map = new google.maps.Map(document.getElementById("map"), mapOptions);

  var 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)
  ];
  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    editable: true,
    strokeColor: "#FF0000",
    strokeOpacity: 1.0,
    strokeWeight: 2,
    map: map
  });

  var deleteMenu = new DeleteMenu();

  google.maps.event.addListener(flightPath, "rightclick", function(e) {
    // Check if click was on a vertex control point
    if (e.vertex == undefined) {
      return;
    }
    deleteMenu.open(map, flightPath.getPath(), e.vertex);
  });

  /**
   * A menu that lets a user delete a selected vertex of a path.
   * @constructor
   */
  function DeleteMenu() {
    this.div_ = document.createElement("div");
    this.div_.className = "delete-menu";
    this.div_.innerHTML = "Delete";

    var menu = this;
    google.maps.event.addDomListener(this.div_, "click", function() {
      menu.removeVertex();
    });
  }
  DeleteMenu.prototype = new google.maps.OverlayView();

  DeleteMenu.prototype.onAdd = function() {
    var deleteMenu = this;
    var 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",
      function(e) {
        if (e.target != deleteMenu.div_) {
          deleteMenu.close();
        }
      },
      true
    );
  };

  DeleteMenu.prototype.onRemove = function() {
    google.maps.event.removeListener(this.divListener_);
    this.div_.parentNode.removeChild(this.div_);

    // clean up
    this.set("position");
    this.set("path");
    this.set("vertex");
  };

  DeleteMenu.prototype.close = function() {
    this.setMap(null);
  };

  DeleteMenu.prototype.draw = function() {
    var position = this.get("position");
    var projection = this.getProjection();

    if (!position || !projection) {
      return;
    }

    var 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.
   */
  DeleteMenu.prototype.open = function(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.
   */
  DeleteMenu.prototype.removeVertex = function() {
    var path = this.get("path");
    var vertex = this.get("vertex");

    if (!path || vertex == undefined) {
      this.close();
      return;
    }

    path.removeAt(vertex);
    this.close();
  };
}

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: 3px;
  color: #666;
  font-weight: bold;
  border: 1px solid #999;
  font-family: sans-serif;
  font-size: 12px;
  box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.3);
  margin-top: -10px;
  margin-left: 10px;
  cursor: pointer;
}

.delete-menu:hover {
  background: #eee;
}

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Deleting a Vertex</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initialize&libraries=&v=weekly"
      defer
    ></script>
    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script src="./app.js"></script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

All

<!DOCTYPE html>
<html>
  <head>
    <title>Deleting a Vertex</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initialize&libraries=&v=weekly"
      defer
    ></script>
    <style type="text/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: 3px;
        color: #666;
        font-weight: bold;
        border: 1px solid #999;
        font-family: sans-serif;
        font-size: 12px;
        box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.3);
        margin-top: -10px;
        margin-left: 10px;
        cursor: pointer;
      }

      .delete-menu:hover {
        background: #eee;
      }
    </style>
    <script>
      (function(exports) {
        "use strict";

        function initialize() {
          var mapOptions = {
            zoom: 3,
            center: new google.maps.LatLng(0, -180),
            mapTypeId: "terrain"
          };
          var map = new google.maps.Map(
            document.getElementById("map"),
            mapOptions
          );
          var 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)
          ];
          var flightPath = new google.maps.Polyline({
            path: flightPlanCoordinates,
            editable: true,
            strokeColor: "#FF0000",
            strokeOpacity: 1.0,
            strokeWeight: 2,
            map: map
          });
          var deleteMenu = new DeleteMenu();
          google.maps.event.addListener(flightPath, "rightclick", function(e) {
            // Check if click was on a vertex control point
            if (e.vertex == undefined) {
              return;
            }

            deleteMenu.open(map, flightPath.getPath(), e.vertex);
          });
          /**
           * A menu that lets a user delete a selected vertex of a path.
           * @constructor
           */

          function DeleteMenu() {
            this.div_ = document.createElement("div");
            this.div_.className = "delete-menu";
            this.div_.innerHTML = "Delete";
            var menu = this;
            google.maps.event.addDomListener(this.div_, "click", function() {
              menu.removeVertex();
            });
          }

          DeleteMenu.prototype = new google.maps.OverlayView();

          DeleteMenu.prototype.onAdd = function() {
            var deleteMenu = this;
            var 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",
              function(e) {
                if (e.target != deleteMenu.div_) {
                  deleteMenu.close();
                }
              },
              true
            );
          };

          DeleteMenu.prototype.onRemove = function() {
            google.maps.event.removeListener(this.divListener_);
            this.div_.parentNode.removeChild(this.div_); // clean up

            this.set("position");
            this.set("path");
            this.set("vertex");
          };

          DeleteMenu.prototype.close = function() {
            this.setMap(null);
          };

          DeleteMenu.prototype.draw = function() {
            var position = this.get("position");
            var projection = this.getProjection();

            if (!position || !projection) {
              return;
            }

            var 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.
           */

          DeleteMenu.prototype.open = function(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.
           */

          DeleteMenu.prototype.removeVertex = function() {
            var path = this.get("path");
            var vertex = this.get("vertex");

            if (!path || vertex == undefined) {
              this.close();
              return;
            }

            path.removeAt(vertex);
            this.close();
          };
        }

        exports.initialize = initialize;
      })((this.window = this.window || {}));
    </script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>
(function(exports) { "use strict"; function initialize() { var mapOptions = { zoom: 3, center: new google.maps.LatLng(0, -180), mapTypeId: "terrain" }; var map = new google.maps.Map(document.getElementById("map"), mapOptions); var 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) ]; var flightPath = new google.maps.Polyline({ path: flightPlanCoordinates, editable: true, strokeColor: "#FF0000", strokeOpacity: 1.0, strokeWeight: 2, map: map }); var deleteMenu = new DeleteMenu(); google.maps.event.addListener(flightPath, "rightclick", function(e) { // Check if click was on a vertex control point if (e.vertex == undefined) { return; } deleteMenu.open(map, flightPath.getPath(), e.vertex); }); /** * A menu that lets a user delete a selected vertex of a path. * @constructor */ function DeleteMenu() { this.div_ = document.createElement("div"); this.div_.className = "delete-menu"; this.div_.innerHTML = "Delete"; var menu = this; google.maps.event.addDomListener(this.div_, "click", function() { menu.removeVertex(); }); } DeleteMenu.prototype = new google.maps.OverlayView(); DeleteMenu.prototype.onAdd = function() { var deleteMenu = this; var 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", function(e) { if (e.target != deleteMenu.div_) { deleteMenu.close(); } }, true ); }; DeleteMenu.prototype.onRemove = function() { google.maps.event.removeListener(this.divListener_); this.div_.parentNode.removeChild(this.div_); // clean up this.set("position"); this.set("path"); this.set("vertex"); }; DeleteMenu.prototype.close = function() { this.setMap(null); }; DeleteMenu.prototype.draw = function() { var position = this.get("position"); var projection = this.getProjection(); if (!position || !projection) { return; } var 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. */ DeleteMenu.prototype.open = function(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. */ DeleteMenu.prototype.removeVertex = function() { var path = this.get("path"); var vertex = this.get("vertex"); if (!path || vertex == undefined) { this.close(); return; } path.removeAt(vertex); this.close(); }; } exports.initialize = initialize; })((this.window = this.window || {}));
/* 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: 1px solid #999; font-family: sans-serif; font-size: 12px; box-shadow: 1px 3px 3px rgba(0, 0, 0, 0.3); margin-top: -10px; margin-left: 10px; cursor: pointer; } .delete-menu:hover { background: #eee; }
<!DOCTYPE html> <html> <head> <title>Deleting a Vertex</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <script src="https://maps.googleapis.com/maps/api/js?key=&callback=initialize&libraries=&v=weekly" defer ></script> <!-- jsFiddle will insert css and js --> </head> <body> <div id="map"></div> </body> </html>