Google Maps api v3 enableEditing polylines


/ Published in: JavaScript
Save to your folder(s)

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.


Copy this code and paste it in your HTML
  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>

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.