Question

23

Event handler for editing a Google Maps Polyline?

rated 0 times [ 30] [ 7] / answers: 1 / hits: 15251 / 11 Years ago, thu, march 28, 2013, 12:00:00

I'm looking for an event that fires while you are editing a Polyline in Google Maps, similar to the 'drag' event on Markers. I've found the 'capturing_changed' event, but it seems to fire on dragstart and dragend, not on drag. As is I'm having to reinvent the wheel by allowing a Marker to be dragged and updating the Polyline based on where the Marker is, basically reinventing editable Polylines. I'd like to be able to add Markers, which editable Polylines do smoothly, but I have to be able to detect on drag. I can't find anything in the API documentation or on a Google search, so I thought I'd ask here.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jaelynncherokeeg

Add To Favorites

Follow

Total Points: 697

Total Questions: 109

Total Answers: 104

Location: France

Member since Thu, Mar 18, 2021

3 Years ago

jaelynncherokeeg questions

1 NextJS load external image Amazon

Thu, May 27, 21, 00:00, 3 Years ago

1 Create an Array of Favorite fruits Object

Fri, Jan 24, 20, 00:00, 4 Years ago

1 React Testing Library - Avoid getBy?

Thu, Nov 14, 19, 00:00, 5 Years ago

1 How do I POST data to a .NET Core Web API using the fetch() javascript method

Thu, Sep 26, 19, 00:00, 5 Years ago

1 Yarn Link All Packages/Workspaces

Wed, Sep 18, 19, 00:00, 5 Years ago

View All

answered 11 Years ago janettejordynm · Accepted Answer

The simple Polyline example from the documentation modified to add events on changes (insert_at, remove_at, set_at, dragend).

<!DOCTYPE html>

<html>

  <head>

    <meta name=viewport content=initial-scale=1.0, user-scalable=no>

    <meta charset=utf-8>

    <title>Google Maps JavaScript API v3 Example: Polyline Simple</title>

    <link href=/maps/documentation/javascript/examples/default.css rel=stylesheet>

    <script src=https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false></script>

    <script>

var flightPath = null;



      function initialize() {

        var myLatLng = new google.maps.LatLng(0, -180);

        var mapOptions = {

          zoom: 3,

          center: myLatLng,

          mapTypeId: google.maps.MapTypeId.TERRAIN

        };



        var map = 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)

        ];

        flightPath = new google.maps.Polyline({

          path: flightPlanCoordinates,

          strokeColor: '#FF0000',

          strokeOpacity: 1.0,

          strokeWeight: 2,

          editable: true,

          draggable: true

        });

        google.maps.event.addListener(flightPath, dragend, getPath);

        google.maps.event.addListener(flightPath.getPath(), insert_at, getPath);

        google.maps.event.addListener(flightPath.getPath(), remove_at, getPath);

        google.maps.event.addListener(flightPath.getPath(), set_at, getPath);

        flightPath.setMap(map);

      }



function getPath() {

   var path = flightPath.getPath();

   var len = path.getLength();

   var coordStr = ;

   for (var i=0; i<len; i++) {

     coordStr += path.getAt(i).toUrlValue(6)+<br>;

   }

   document.getElementById('path').innerHTML = coordStr;

}



    </script>

  </head>

  <body onload=initialize()>

    <div id=map-canvas style=height:500px; width:600px;></div>

    <div id=path></div>

  </body>

</html>

working example

code snippet:

var flightPath = null;



function initialize() {

  var myLatLng = new google.maps.LatLng(0, -180);

  var mapOptions = {

    zoom: 3,

    center: myLatLng,

    mapTypeId: google.maps.MapTypeId.TERRAIN

  };



  var map = 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)

  ];

  flightPath = new google.maps.Polyline({

    path: flightPlanCoordinates,

    strokeColor: '#FF0000',

    strokeOpacity: 1.0,

    strokeWeight: 2,

    editable: true,

    draggable: true

  });

  google.maps.event.addListener(flightPath, dragend, getPath);

  google.maps.event.addListener(flightPath.getPath(), insert_at, getPath);

  google.maps.event.addListener(flightPath.getPath(), remove_at, getPath);

  google.maps.event.addListener(flightPath.getPath(), set_at, getPath);

  flightPath.setMap(map);

}



function getPath() {

  var path = flightPath.getPath();

  var len = path.getLength();

  var coordStr = ;

  for (var i = 0; i < len; i++) {

    coordStr += path.getAt(i).toUrlValue(6) + <br>;

  }

  document.getElementById('path').innerHTML = coordStr;

}

google.maps.event.addDomListener(window, 'load', initialize);

<script src=https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk></script>

<div id=path></div>

<div id=map-canvas style=height:500px; width:600px;></div>