Is it possible to have the editable attribute turned off in a polyline but still display the vertices as clickable circles?

Question

I would like to display a polyline so that the vertices can not be moved, deleted or added, ie exactly like when the editable attribute is set to false, but the circles which are present when the editable attribute is set to true are still visible so that they can be clicked and a vertex number obtained.

So the polyline code could be:

newPoly = new google.maps.Polyline({
    strokeColor:    '#08088a',
    strokeWeight:   2,
    editable:       false
});

Is this possible?

score 1 · Accepted Answer · edited May 23 '17 at 12:23

One option: process through the polyline, add circular markers to each vertex in the line with the vertex number in the marker's infowindow.

Related question: Google Maps V3 Polyline : make it editable without center point(s)

proof of concept fiddle

code snippet:

function initialize() {
  var infowindow = new google.maps.InfoWindow();
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var polyCoord = [
    new google.maps.LatLng(41.86, 8.73),
    new google.maps.LatLng(41.88, 8.75),
    new google.maps.LatLng(42, 8),
    new google.maps.LatLng(43.5, 9)
  ];
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < polyCoord.length; i++) {
    bounds.extend(polyCoord[i]);
    var marker = new google.maps.Marker({
      position: polyCoord[i],
      title: '#0',
      map: map,
      icon: {
        path: google.maps.SymbolPath.CIRCLE,
        fillColor: 'white',
        fillOpacity: 1,
        scale: 3,
        strokeColor: 'black',
        strokeWeight: 1,
        strokeOpacity: 1,
        // anchor: new google.maps.Point(200, 200)
      }
    });
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        infowindow.setContent("vertex #" + i + "<br>coord: (" + this.getPosition().toUrlValue(6) + ")");
        infowindow.open(map, marker);
      }
    })(marker, i));
  }
  map.fitBounds(bounds);
  // Polyline
  var newPoly = new google.maps.Polyline({
    strokeColor: '#08088a',
    strokeWeight: 2,
    editable: false,
    path: polyCoord,
    map: map
  });
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>

I did not mention it in the question but you correctly guessed that I wanted to display some info for each vertex. Your work-around is a good one. I added a button that toggles the edit mode on and off. When off it prevents the user from inadvertently moving the vertices etc which was my desired aim. Thanks. — havelly, Mar 28 '16 at 11:58

Is it possible to have the editable attribute turned off in a polyline but still display the vertices as clickable circles?

1 Answers1