test of simple google maps polyline

made the polyline editable: cool

by hrabinowitz

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"></script>
<div id="map-canvas"></div>

CSS

html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }

JavaScript

// This example creates a 2-pixel-wide red polyline showing
// the path of William Kingsford Smith's first trans-Pacific flight between
// Oakland, CA, and Brisbane, Australia.
var theMap;
function initialize() {
  var mapOptions = {
    zoom: 3,
    center: new google.maps.LatLng(0, -180),
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  theMap = new google.maps.Map(document.getElementById('map-canvas'),
      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,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2,
      editable: true
  });

  flightPath.setMap(theMap);
    
  // Add a listener for the click event
  google.maps.event.addListener(theMap, 'click', onClick);
      
  google.maps.event.addListener(flightPath.getPath(), 'insert_at', onClick);
  google.maps.event.addListener(flightPath.getPath(), 'set_at', onClick);
  google.maps.event.addListener(flightPath.getPath(), 'remove_at', onClick);
    
    function onClick(e) {
        console.log("onClick(): path=", flightPath.getPath(), "e=", e);
        var path = flightPath.getPath();
        for (var i=0; i< path.length; i++) {
            console.log("i=", i, path.getAt(i));
        }
    }

}

// hr: their example uses window.load listener, but I think that does not work with jsfiddle, so just call it directly.
//google.maps.event.addDomListener(window, 'load', initialize);
initialize();