I have a problem using balloons in google earth.
I have some markers on the map, upon clicking on a marker, a balloon popup is shown containing some data, now when I click on the close button of that balloon, the click event of the map is also triggered which is really annoying as I have a handler attached with the map click event.
I tried everything including using event.stopPropagation() in the 'beforeclose' event of the htmlDivBalloon but still nothing works.
Anyone has an idea about that ?
Best Regards
John Tadros
The chances are you are not handling the default event or you are not screening which objects the event acts in the handler "attached with the map click event". You haven't shown any code, so it is hard to say exactly how to fix it - but a generic way to handle this is as follows.
// listen for mousedown on the window
google.earth.addEventListener(ge.getWindow(), 'mousedown', function(e) {
var type = e.getTarget().getType();
if (type == 'KmlPlacemark') {
// prevent the default event for placemarks, stop Propagation
e.preventDefault();
e.stopPropagation();
} else if(type == 'GEGlobe') {
// do something with the globe...
}
// etc...
});
Related
I am experiencing an issue with leaflet and it's mouseout event.
In the code below, sometimes (particulary if you move the mouse fast), the mouseout event is not triggered. The Mouse out ! doesn't appear in the console.
I found out that this behaviour is related to the icon replacement. A simple layer.setStyle works every time. (Here I use the leaflet-gpx plugin but it works the same way as leaflet's IconUrl or shadowUrl)
// This works every time
gpxPath.on('mouseover', function (e) {
var layer = e.target;
layer.options.marker_options.startIconUrl = 'myHoverIconStartUrl';
layer.options.marker_options.endIconUrl = 'myHoverIconEndUrl';
layer.reload();
});
gpxPath.on('mouseout', function (e) {
console.log('Mouse out !')
var layer = e.target;
/* those two lines below cause the issue */
layer.options.marker_options.startIconUrl = '';
layer.options.marker_options.endIconUrl = '';
layer.reload();
});
I know that the mouseout event sometimes causes issues like this one, but in this particular case I am forced to use the leaflet events and I am a little bit out of ideas.
Are you trying to make markers display a different icon on hover?
It's hard to tell without an example, but what I think is happening is:
Your mouseoutevent isn't getting triggered reliably because the mouseover event is ran continuously, as long as your mouse is positioned on it, every time the icons rebuild.
You may notice this if you add a console.log in that function as well. You can happen to move off while it is rebuilding, so you don't trigger the mouseout event reliably.
If so, try something like:
line.once('mouseover', function () {
//switch to icons
});
line.on('mouseout', function () {
//clear icons
//Prevent mouseover event from firing continuously if/when the icon changes
line.once('mouseover', function () {
//switch to icons
});
});
I'm having trouble understanding why the setgeometry event inside my mouseup event keeps firing after rightlick event... even though I do remove the setgeometry event listener.
drawLayer.addListener('mouseup', function() {
changedGeom = drawLayer.addListener('setgeometry', function(e) {
console.log('got new geometry');
google.maps.event.removeListener(changedGeom);
});
});
drawLayer.addListener('rightclick', function(e) {
console.log('deleted polygon');
google.maps.event.removeListener(changedGeom);
});
The reason why I have setgeometry inside mouseup is because I only want the last position of the polygon. Otherwise it will record every move.
Maybe I'm over complicating this, but here's what to do to reproduce the problem:
Open the console and drag the polygon on the Google Map. You should see got new geometry message once.
Now rightclick on your mouse and you should see the message delete polygon.
Now move the polygon again. You will see that the setgeometry event keeps firing, resulting in plenty of got new geometry messages.
I'm unsure why this is happening. Can someone explain?
Demo: http://jsfiddle.net/8ueq6spu
I have figured out why this is happening to you.
I removed your rightclick listener to see that an event was still being triggered on a right click action, then I realised it is because both left click and right click result in a mouseup event.
So in your current implementation the listener is being removed on the rightclick press/event, but a new instance is created as soon as the button is released due to the mouseup event.
To fix this behaviour you could opt for a standard click instead of mouseup, however, I also noted that this event does not fire when you drag the boundary nodes (which is probably why you used mouseup in the first place).
A quick fix would be to still use the mouseup event, but detect which type of click the event originated from e.g.
drawLayer.addListener('mouseup', function(e) {
if (e.which === 1) {
console.log("Left click");
} else if (e.which === 2) {
console.log("Middle click");
} else if (e.which === 3) {
console.log("Right click");
}
});
Adapted this solution from : How to distinguish between left and right mouse click on mousedown
event in Google Map API v3
Related to this question: 'Make custom overlay clickable (Google Maps API 3)' and related also to my comment in the same question (posted here to give it more visibility and because I think is other problem).
I have added a click listener to my overlay polygon but now I have the problem that when user wants to pan the map and clicks on an overlay to do that, when the mouse button is released the click event is triggered. Obviously I don't want to execute the onclick action when I just want to pan the map. Any elegant solution for this issue?
Here is an example of the issue: panning/click issue.
Check out this updated fiddle here: http://jsfiddle.net/9gvsq3od/5/
Basically I added this code:
var dragging = false;
google.maps.event.addDomListener(this.path_, 'mousedown', function (evt) {
dragging = false;
});
google.maps.event.addDomListener(this.path_, 'mousemove', function (evt) {
dragging = true;
});
// onclick listener
google.maps.event.addDomListener(this.path_, 'click', function (evt) {
if (dragging) { return false;}
alert('clicked on path');
});
The click event is only triggered when the mouse button is released so code sets a variable dragging to true when the mouse moves. The first mousedown handle resets the dragging variable, since there is no "mousestop" event, we need to reset the state when beginning a new interaction instead.
In one of our projects we're using Leaflet along with Leaflet.markercluster plugin. Looking through the Leaflet's sources I found that it appends _collapse() function to the map's click event, so whenever I click on the map it contracts previously expanded cluster.
Now, I want to disable this behavior. If the cluster is expanded, then I just want to deselect all of its markers on click event (and don't contract the cluster itself). Here is the piece of my code:
map.on('click', function(e) {
scope.deselectAllMarkers();
});
I tried to add the following lines in the end of this one-line callback in order to stop propagation of click event:
scope.L.DomEvent.stopPropagation(e);
scope.L.DomEvent.preventDefault(e);
scope.L.DomEvent.stop(e);
scope.L.DomEvent.stopPropagation(e.originalEvent);
scope.L.DomEvent.preventDefault(e.originalEvent);
scope.L.DomEvent.stop(e.originalEvent);
And none of them works. Default listener which is hidden inside of the Leaflet sources keeps its invocation whenever I click on the map. Am I missing something?
I know that this answer is quite late, but if someone is interested in a solution, here is how i have solved it.
This snippet here below is an example of binding a function to the click event.
map.on('click', doSomething);
Actually, after checking leaflet's API and some geekish debugging, it seems that the event returns an object, not the event itself. The event itself is wrapped into a field within the returned object.
var doSomething = function(map) {
// stop propagation
map.originalEvent.preventDefault();
};
When using the above snippet, the event bubbling has stopped, something which i wanted, and probably what you wanted.
This one worked for me...
var div = L.DomUtil.get('div_id');
if (!L.Browser.touch) {
L.DomEvent.disableClickPropagation(div);
L.DomEvent.on(div, 'mousewheel', L.DomEvent.stopPropagation);
} else {
L.DomEvent.on(div, 'click', L.DomEvent.stopPropagation);
}
Thanks to https://gis.stackexchange.com/questions/104507/disable-panning-dragging-on-leaflet-map-for-div-within-map
I know that this answer is event more quite late, but as in jquery you can use .off
map.on('click', doSomething);
map.off('click');
It works fine for any leaflet events.
I use it for 'zoomend' event to be triggered one time only.
map.on('moveend', function(e){
console.log("any code");
map.off('moveend');
});
You can't override the event propagation from an event handler. You need to use the builtin Leaflet helper after the page has loaded, like this:
$('.element').each (i,el)->
L.DomEvent.disableClickPropagation(el);
In the end I've solved the issue by manual removal of default click handler which was invoking the _collapse() method, as far as I remember. Dirty, but it did the trick.
You have use like this event.stopPropagation()
map.on('click', function(e) { //don't forget to pass this 'e' event parameter
e.preventDefault();
scope.deselectAllMarkers();
e.stopPropagation();
return false;
});
Try anyone of this
1.event.stopPropagation()
2.event.preventDefault()
3.return false
I am using google maps + javascript + php in my application.
I want to know two things:
In google maps,
does moveend event ALWAYS gets fired
AFTER zoomend/dragend (whichever of
two) event occurs.
When I click zoom icon on google map
or scroll the mouse wheel to zoom,
the zoomend event gets fired more
than once. If I zoom in one step
using + icon on map, the zoomend
event gets fired twice or sometimes
more. any possible loophole.
And so want to know how to stop further event propogation in javascript. (remember I need not use clearListeners as it will forever ignore event handler which is undesirable).
Thank you.
I set up listeners for 'moveend', 'zoomend', and 'dragend' to try it out.
GEvent.addListener(map, "moveend", function() { console.log('moveend'); });
GEvent.addListener(map, "zoomend", function() { console.log('zoomend'); });
GEvent.addListener(map, "dragend", function() { console.log('dragend'); });
It appears that 'moveend' always fires after 'zoomend' or 'dragend'.
However, no events ever fired more than once at a time. Maybe you accidentally set up two simultaneous listeners. You shouldn't need to use stopPropagation or cancelBubble.
you could try just reuturning false or null from the event.
If that doesn't work trying using "event.cancelBubble = true" or "event.stopPropagation"