Home/ Questions/Q 922339
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T19:00:48+00:00

I’m developing a Google Map API v2 app, where markers are loaded from a

  • 0

I’m developing a Google Map API v2 app, where markers are loaded from a database. These markers can then be dragged to a new location by a user and saved to the database.

I’m adding these markers as draggable, however I don’t just want the users to be able to drag them accidentally. So I have added a button to enable the dragging and then press again to disable it.

Only problem is I’m not sure how I can toggle the ability to drag the markers without reloading them again, as there could be a few hundred markers on the map and may take some time.

Any ideas how I could achieve this?

Thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    That should be very easy to do. First you need to keep a reference to all your markers. Then to toggle the dragging behaviour, you can simply iterate through your markers and call the enableDragging() or the disableDragging() method on each marker.

    For this to work, your markers will have to be initialized with the GMarkerOptions.draggable option set to true, but I assume you are already doing this.

    Here’s a fully working example:

    <!DOCTYPE html>
<html> 
<head>
   <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false" 
           type="text/javascript"></script>
</head> 
<body onunload="GUnload()">
   <div id="map" style="width: 400px; height: 300px"></div> 

   <input type="button" value="Toggle Drag" onclick="toggleDrag()">

   <script type="text/javascript"> 
      var map = new GMap2(document.getElementById("map"));
      var point = new GLatLng(51.49, -0.12);
      var marker = new GMarker(point, { draggable: true });

      map.setCenter(point, 8);
      map.addOverlay(marker);

      function toggleDrag() {
        if (marker.draggingEnabled()) {
          marker.disableDragging();
        }
        else {
          marker.enableDragging();
        }
      }
   </script> 
</body> 
</html>
    • 0