Posted By

peckham on 08/03/10


Tagged

google maps polyline api v3 enableEditing


Versions (?)

Google Maps api v3 enableEditing polylines


 / Published in: JavaScript
 

URL: http://www.ekelschot.eu/demo/maps/enableEditing.html

This example shows how enableEditing can be emulated in version 3 of the Google Maps API. \r\nWhen releasing an editable point after dragging it, the changed part of the polyline will be updated.\r\nPoints can be added to by clicking on the map and they can be removed by clicking on them.

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>Google Maps api v3 - enableEditing for polylines</title>
  6. <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.1&sensor=false"></script>
  7. <script type="text/javascript">
  8. var map = null;
  9. var polyLine;
  10. var tmpPolyLine;
  11. var markers = [];
  12. var vmarkers = [];
  13. var g = google.maps;
  14.  
  15. var initMap = function(mapHolder) {
  16. markers = [];
  17. vmarkers = [];
  18. var mapOptions = {
  19. zoom: 7,
  20. center: new g.LatLng(52.092, 5.121),
  21. mapTypeId: g.MapTypeId.HYBRID,
  22. draggableCursor: 'auto',
  23. draggingCursor: 'move',
  24. disableDoubleClickZoom: true
  25. };
  26. map = new g.Map(document.getElementById(mapHolder), mapOptions);
  27. g.event.addListener(map, "click", mapLeftClick);
  28. mapHolder = null;
  29. mapOptions = null;
  30. };
  31.  
  32. var initPolyline = function() {
  33. var polyOptions = {
  34. strokeColor: "#3355FF",
  35. strokeOpacity: 0.8,
  36. strokeWeight: 4
  37. };
  38. var tmpPolyOptions = {
  39. strokeColor: "#3355FF",
  40. strokeOpacity: 0.4,
  41. strokeWeight: 4
  42. };
  43. polyLine = new g.Polyline(polyOptions);
  44. polyLine.setMap(map);
  45. tmpPolyLine = new g.Polyline(tmpPolyOptions);
  46. tmpPolyLine.setMap(map);
  47. };
  48.  
  49. var mapLeftClick = function(event) {
  50. if (event.latLng) {
  51. var marker = createMarker(event.latLng);
  52. markers.push(marker);
  53. if (markers.length != 1) {
  54. var vmarker = createVMarker(event.latLng);
  55. vmarkers.push(vmarker);
  56. vmarker = null;
  57. }
  58. var path = polyLine.getPath();
  59. path.push(event.latLng);
  60. marker = null;
  61. }
  62. event = null;
  63. };
  64.  
  65. var createMarker = function(point) {
  66. var imageNormal = new g.MarkerImage(
  67. "square.png",
  68. new g.Size(11, 11),
  69. new g.Point(0, 0),
  70. new g.Point(6, 6)
  71. );
  72. var imageHover = new g.MarkerImage(
  73. "square_over.png",
  74. new g.Size(11, 11),
  75. new g.Point(0, 0),
  76. new g.Point(6, 6)
  77. );
  78. var marker = new g.Marker({
  79. position: point,
  80. map: map,
  81. icon: imageNormal,
  82. draggable: true
  83. });
  84. g.event.addListener(marker, "mouseover", function() {
  85. marker.setIcon(imageHover);
  86. });
  87. g.event.addListener(marker, "mouseout", function() {
  88. marker.setIcon(imageNormal);
  89. });
  90. g.event.addListener(marker, "drag", function() {
  91. for (var m = 0; m < markers.length; m++) {
  92. if (markers[m] == marker) {
  93. polyLine.getPath().setAt(m, marker.getPosition());
  94. moveVMarker(m);
  95. break;
  96. }
  97. }
  98. m = null;
  99. });
  100. g.event.addListener(marker, "click", function() {
  101. for (var m = 0; m < markers.length; m++) {
  102. if (markers[m] == marker) {
  103. marker.setMap(null);
  104. markers.splice(m, 1);
  105. polyLine.getPath().removeAt(m);
  106. removeVMarkers(m);
  107. break;
  108. }
  109. }
  110. m = null;
  111. });
  112. return marker;
  113. };
  114.  
  115. var createVMarker = function(point) {
  116. var prevpoint = markers[markers.length-2].getPosition();
  117. var imageNormal = new g.MarkerImage(
  118. "square_transparent.png",
  119. new g.Size(11, 11),
  120. new g.Point(0, 0),
  121. new g.Point(6, 6)
  122. );
  123. var imageHover = new g.MarkerImage(
  124. "square_transparent_over.png",
  125. new g.Size(11, 11),
  126. new g.Point(0, 0),
  127. new g.Point(6, 6)
  128. );
  129. var marker = new g.Marker({
  130. position: new g.LatLng(
  131. point.lat() - (0.5 * (point.lat() - prevpoint.lat())),
  132. point.lng() - (0.5 * (point.lng() - prevpoint.lng()))
  133. ),
  134. map: map,
  135. icon: imageNormal,
  136. draggable: true
  137. });
  138. g.event.addListener(marker, "mouseover", function() {
  139. marker.setIcon(imageHover);
  140. });
  141. g.event.addListener(marker, "mouseout", function() {
  142. marker.setIcon(imageNormal);
  143. });
  144. g.event.addListener(marker, "dragstart", function() {
  145. for (var m = 0; m < vmarkers.length; m++) {
  146. if (vmarkers[m] == marker) {
  147. var tmpPath = tmpPolyLine.getPath();
  148. tmpPath.push(markers[m].getPosition());
  149. tmpPath.push(vmarkers[m].getPosition());
  150. tmpPath.push(markers[m+1].getPosition());
  151. break;
  152. }
  153. }
  154. m = null;
  155. });
  156. g.event.addListener(marker, "drag", function() {
  157. for (var m = 0; m < vmarkers.length; m++) {
  158. if (vmarkers[m] == marker) {
  159. tmpPolyLine.getPath().setAt(1, marker.getPosition());
  160. break;
  161. }
  162. }
  163. m = null;
  164. });
  165. g.event.addListener(marker, "dragend", function() {
  166. for (var m = 0; m < vmarkers.length; m++) {
  167. if (vmarkers[m] == marker) {
  168. var newpos = marker.getPosition();
  169. var startMarkerPos = markers[m].getPosition();
  170. var firstVPos = new g.LatLng(
  171. newpos.lat() - (0.5 * (newpos.lat() - startMarkerPos.lat())),
  172. newpos.lng() - (0.5 * (newpos.lng() - startMarkerPos.lng()))
  173. );
  174. var endMarkerPos = markers[m+1].getPosition();
  175. var secondVPos = new g.LatLng(
  176. newpos.lat() - (0.5 * (newpos.lat() - endMarkerPos.lat())),
  177. newpos.lng() - (0.5 * (newpos.lng() - endMarkerPos.lng()))
  178. );
  179. var newVMarker = createVMarker(secondVPos);
  180. newVMarker.setPosition(secondVPos);//apply the correct position to the vmarker
  181. var newMarker = createMarker(newpos);
  182. markers.splice(m+1, 0, newMarker);
  183. polyLine.getPath().insertAt(m+1, newpos);
  184. marker.setPosition(firstVPos);
  185. vmarkers.splice(m+1, 0, newVMarker);
  186. tmpPolyLine.getPath().removeAt(2);
  187. tmpPolyLine.getPath().removeAt(1);
  188. tmpPolyLine.getPath().removeAt(0);
  189. newpos = null;
  190. startMarkerPos = null;
  191. firstVPos = null;
  192. endMarkerPos = null;
  193. secondVPos = null;
  194. newVMarker = null;
  195. newMarker = null;
  196. break;
  197. }
  198. }
  199. });
  200. return marker;
  201. };
  202.  
  203. var moveVMarker = function(index) {
  204. var newpos = markers[index].getPosition();
  205. if (index != 0) {
  206. var prevpos = markers[index-1].getPosition();
  207. vmarkers[index-1].setPosition(new g.LatLng(
  208. newpos.lat() - (0.5 * (newpos.lat() - prevpos.lat())),
  209. newpos.lng() - (0.5 * (newpos.lng() - prevpos.lng()))
  210. ));
  211. prevpos = null;
  212. }
  213. if (index != markers.length - 1) {
  214. var nextpos = markers[index+1].getPosition();
  215. vmarkers[index].setPosition(new g.LatLng(
  216. newpos.lat() - (0.5 * (newpos.lat() - nextpos.lat())),
  217. newpos.lng() - (0.5 * (newpos.lng() - nextpos.lng()))
  218. ));
  219. nextpos = null;
  220. }
  221. newpos = null;
  222. index = null;
  223. };
  224.  
  225. var removeVMarkers = function(index) {
  226. if (markers.length > 0) {//clicked marker has already been deleted
  227. if (index != markers.length) {
  228. vmarkers[index].setMap(null);
  229. vmarkers.splice(index, 1);
  230. } else {
  231. vmarkers[index-1].setMap(null);
  232. vmarkers.splice(index-1, 1);
  233. }
  234. }
  235. if (index != 0 && index != markers.length) {
  236. var prevpos = markers[index-1].getPosition();
  237. var newpos = markers[index].getPosition();
  238. vmarkers[index-1].setPosition(new g.LatLng(
  239. newpos.lat() - (0.5 * (newpos.lat() - prevpos.lat())),
  240. newpos.lng() - (0.5 * (newpos.lng() - prevpos.lng()))
  241. ));
  242. prevpos = null;
  243. newpos = null;
  244. }
  245. index = null;
  246. };
  247.  
  248. window.onload = function() {
  249. initMap('mapcontainer');
  250. initPolyline();
  251. };
  252. </script>
  253. </head>
  254. <body>
  255. <div id="mapcontainer" style="width: 800px; height: 600px; position: absolute; top: 50%; left: 50%; margin-top: -301px; margin-left: -401px; border: 1px solid black;"></div>
  256. </body>
  257. </html>

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: sergiobotta on March 21, 2014

How can I do to get polyline path when finished?

You need to login to post a comment.