Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google Map Api v3 drag event on map

I am using google map v3 api. I need to detect the drag event on the map. Be it the drag on the map to move to a nearby geographical location or a drag on the marker. I need some javascript function to run when either of the events occur.

like image 431
Maxim Dsouza Avatar asked Aug 08 '11 11:08

Maxim Dsouza


People also ask

How do I add an event to Google Maps?

To add an event, head to Google Maps on Android, tap on Contribute >Events > Add a public event. You can add an event name, tag the location, and add the time and date of the event as well. There's an option to add an image, write more event details, and add description as well.

How do I drag a marker on Google Maps Android?

Long press the marker to enable dragging. When you take your finger off the screen, the marker will remain in that position. Markers are not draggable by default. You must explicitly set the marker to be draggable either with MarkerOptions.

Can I drag and drop markers around the map using JavaScript?

As opposed to statically setting markers (pins) programmatically sometimes you might want your users to be able to interact with the map by dragging existing markers around the map. Fortunately, Google’s JavaScript API offers this functionality out of the box. Below you’ll find an example based on Google Maps API V3.

What is draggable pin marker for Google Maps API?

Draggable Pin Marker for Google Maps API V3. Google’s Maps API offer a vast range of functionality to interact with underlying maps. As opposed to statically setting markers (pins) programmatically sometimes you might want your users to be able to interact with the map by dragging existing markers around the map.

What events can I listen to in the maps JavaScript API?

Some objects within the Maps JavaScript API are designed to respond to user events such as mouse or keyboard events. For example, these are some of the user events that a google.maps.Marker object can listen to: 'click'. 'dblclick'. 'mouseup'. 'mousedown'. 'mouseover'. 'mouseout'.

What can you do with the Google Maps API?

Google’s Maps API offer a vast range of functionality to interact with underlying maps. As opposed to statically setting markers (pins) programmatically sometimes you might want your users to be able to interact with the map by dragging existing markers around the map.


Video Answer


2 Answers

Both Map objects and Marker objects have drag events, although you probably want dragend so that you can do something when a user is done dragging rather than do something while a user is dragging.

So you could do something like this:

google.maps.event.addListener(map, 'dragend', function() { alert('map dragged'); } ); google.maps.event.addListener(marker, 'dragend', function() { alert('marker dragged'); } ); 
like image 183
Trott Avatar answered Sep 22 '22 07:09

Trott


google.maps.event.addListener(map, "mouseover", function (e) {     google.maps.event.addListener(map, "dragend", function () {         setTimeout(() => {            console.log(e); // this contains the information about the coordinates         });     }); }); 
like image 27
AdefemiGreat Avatar answered Sep 19 '22 07:09

AdefemiGreat