• PHP

    Delete Vertex pada Google Map

    Berikut adalah contoh program untuk delete vertex pada google map.

    <!DOCTYPE html>
    <html>
      <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <title>Deleting a vertex</title>
        <style>
          /* 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, .3);
            margin-top: -10px;
            margin-left: 10px;
            cursor: pointer;
          }
          .delete-menu:hover {
            background: #eee;
          }
        </style>
        <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
        <script>
          function initialize() {
            var mapOptions = {
              zoom: 3,
              center: new google.maps.LatLng(-6.9691377,108.9729246),
              mapTypeId: 'terrain'
            };
    
            var map = new google.maps.Map(document.getElementById('map'), mapOptions);
    
            var flightPlanCoordinates = [
              new google.maps.LatLng(-6.5958845,107.4440923),
              new google.maps.LatLng(-6.6407947,107.6976926),
              new google.maps.LatLng(-7.1758121,108.5959127),
              new google.maps.LatLng(-6.9769447,109.8414482)
            ];
            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();
          };
    
          google.maps.event.addDomListener(window, 'load', initialize);
        </script>
      </head>
      <body>
        <div id="map"></div>
      </body>
    </html>