We are trying to add a dragend event to a polygon so that when the user release the mouse, something happens. However, the dragend on the polygon seems to fire like drag. i.e. fires continously and not just once when the dragging has finished.
google.maps.event.addListener(overlay, 'dragend', function () {
// Do something just once when dragging has ended.
});
Anyone come across this issue. Is this a bug?
Many thanks.
You can try to add the event listener like this:
overlay.addListener('dragend', function () {
console.log('Drag end!');
});
Take a look at this example. It might work this way.
Related
From the examples I don't see a way to add a rightclick event on a shape I created on the map programatically. I'm creating maps that are saved to a database, so I'm restoring the shapes. I see an example where they added a click event within the 'overlaycomplete' listener event in examples but how do you do this if you are creating the shape?
You can also do it now in a slightly more succinct way:
newShape.addListener('rightclick', function () {
alert('Right clicked!');
});
So the answer is easy. I just added this code to add the listener:
google.maps.event.addListener(newShape, 'rightclick', function (e) {
alert('Right clicked!');
});
Where newShape is the new created polygon.
Recently on a project I was displaying an Info Window on the click of a map marker where the content was loaded with an XHR request. There was a noticeable delay from the time of the click event to when the AJAX callback triggered the opening of the Info Window and I wanted to change the mouse cursor to a 'wait' icon so the user knew their click had triggered something.
I first tried setting a cursor style on body, html but found the styles used by the map superseded this.
So, how to set a wait cursor regardless of the mouse pointer being positioned over the marker, map, or elsewhere on the page?
This is the first time I've posted a question I have an answer ready for. I found some posts talking about setting either a map cursor or a marker cursor buy nothing concisely explaining how to accomplish what I am asking here. Hope this saves someone a little time.
I ended up with the following code to accomplish this:
/**
* Event handler for marker click event
*/
function markerClickHandler(marker, event) {
$('html, body').css("cursor", "wait");
auctionMap.setOptions({draggableCursor: 'wait'});
marker.setCursor('wait');
$.ajax({
type: 'GET',
url: '/get-marker-info/' + marker.some_id,
dataType: 'html',
}).done(function(response) {
infoWindow.setContent(response);
infoWindow.open(map, marker);
}).fail(function() {
alert('An unknown error occurred.');
}).always(function() {
$('html, body').css("cursor", "auto");
auctionMap.setOptions({draggableCursor: null});
marker.setCursor(null);
});
}
This gets a wait cursor to display when the mouse is anywhere on the page, in or out of the map, and while over the marker.
The draggableCursor by default uses an image of an open hand (http://maps.gstatic.com/mapfiles/openhand_8_8.cur), not a standard CSS cursor property value.
This is why we use null when reverting the cursor after the call is completed, rather than say using the cursor auto.
It works well enough though is a little wonky in its interactions with mouse movement to trigger the transition. Curious if anyone could improve the code in that regard.
See an example: http://jsfiddle.net/0ere5tju/
I am working with the GoogleMaps API and I'm trying to distinguish between a rectangle object being resized or moved.
I am using the listener like so:
google.maps.event.addListener(newShape, 'bounds_changed', function() {
// do stuff
});
However, this will fire when the rectangle is resized AND when it is moved completely. Is there some way to distinguish between these two distinct events?
I tried the way #Darwin has suggested. When we just begin to drag the coordinates still remain the same and so the event is fired for drag as well as bounds_changed
An easier and more reliable way, I did is to have a global variable called isBeingDragged and set it to true in dragstart event handler. In the bounds_changed event handler, I checked if this variable is true. If it is not, its a resize event, else it is a drag event.
I again set the isBeingDragged variable to false in drag_end event handler.
Store the bounds of the rectangle initially, when the event fires check if both(soutWest and NorthEast) have been changed. When It does , the rectangle has been moved, otherwise it has been resized.
After the check update the stored bounds.
I have events working fine in Chrome and IE10 for Google Maps (APIv3) and RichMarkers. Problem is, the same code borks on Firefox19 with event undefined. So, this code works on Chrome and IE10...
google.maps.event.addListener( marker, 'mouseover', function(event) {
console.log(event);
});
But not on Firefox. Interestingly, attaching a CLICK event to the map object does work as you'd expect. The event object is visible within the called function in all browsers. So, does anyone have any idea as to how to fix this? I really need to pass the event object onwards as I have funcs that use it for positioning and so on.
Normally, I'd get around this using jQuery to attach the events, but this is not an option here.
Cheers
CT
There is no mouseover-event : http://google-maps-utility-library-v3.googlecode.com/svn/trunk/richmarker/docs/reference.html
Apply the mouseover-event to the content of the marker(the content must be a node)
In my init i have some thing like this
google.maps.event.addListener(gmap, 'zoom_changed', function(){
GMapPlot.getSwNe(window.gmap.getBounds());
//GMapPlot.rePlotMap(presentPlaceType);
});
and at some point i have gmap.fitBounds(GMapPlot.markerBounds);, my question is fitBounds fires a zoom_changed event that intern invokes the bound method, i don't want this to happen, is there a way to do that. If i try to clearListener for zoom_changed event before that fitBounds is not working.