I would like to have an event before drawing the overlays using drawing tool (polygon). In the event, I would like to clear any previous drawings.
In coffeescript
google.maps.event.addDomListener mapElement, 'click', (e) ->
if e?.target?.parentElement?.parentElement?.parentElement?.title == "Draw a shape"
clearExistingShapes() # <-- your own code goes there
Not very elegant, but it works in a pinch.
No :(
Hopefully in the future. Stable release is 3.32 at time of writing
We can listen changes and then get mode.
drawingManager.addListener( "drawingmode_changed", function() {
console.log("drawingmode_changed", drawingManager.getDrawingMode());
});
Related
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.
I am using kinetic-v4.3.0-beta2.js
I want to handle mobile touch event on group for ios & android.
I am binding event such as following
group.on('touchstart', function (evt) {
$('#onpopMenu').popup("open", { x: leftPosition, y: topPosition });
});
I tried 'touchend', 'touchstart' and 'tap'
Got partial success in "Tap" but in that case, shape is draggable so tap event is not properly fire because object will move from it's place.
but if shape is not draggable then it will work fine.
I tried 'touchend' and 'touchstart' event also but popup menu is close after event fire in iOs and android as I am opening Jquery Mobile Popup by Touching group!
The popup menu will only open for 2-3 seconds when the touchstart event fired.
Anyone faced the same problem with kinetic JS Mobile events? How to handle only "Click" or "Touch" event with it.
I checked this http://www.html5canvastutorials.com/kineticjs/html5-canvas-mobile-events/ for reference but had no luck!
I am developing application with Phonegap + JQM + Kinetics JS
Thanks in advance!
Keep in mind that your application is running inside a webview. This is why you've got these 2/3 seconds of delay on touch/click event.
This is why in all my PhoneGap dev, I use Fastclick.js. FastClick is a simple, easy-to-use library for eliminating the 300ms delay between a physical tap and the firing of a click event on mobile browsers. The aim is to make your application feel less laggy and more responsive while avoiding any interference with your current logic.
You can find it here https://github.com/ftlabs/fastclick.
It's easy to use (if you're using jQuery) :
<script type='application/javascript' src='/path/to/fastclick.js'></script>
<script>
$(function() {
FastClick.attach(document.body);
});
</script>
I made a jsfiddle for you to test out the click/touch events.
From what I understand, you have a Kinetic.Group node that is draggable but you want to open up a popup using jquery mobile.
You are right that when you drag an object, the tap event does not fire. But you said otherwise the tap event works fine if the shape is not draggable. This leads me to believe:
You want a popup on "tap"
You want a popup on "dragend"
If so, all you need is to use both events like this:
group.on('tap dragend', function (evt) {
$('#onpopMenu').popup("open", { x: leftPosition, y: topPosition });
});
Please let me know if my assumptions are wrong, and I can work with you to get the right solution. I am guessing when you want to popup, so if you let me know exactly when you want a popup to occur that will help a lot.
You might want to also look into using evt.cancelBubble = true; http://www.html5canvastutorials.com/kineticjs/html5-canvas-cancel-event-bubble-propagation-with-kineticjs/
We are experiencing an issue related to GoogleMaps. The issue is mainly related to touch screens. We were trying to resolve the issue, but so far no success.
We found in this article that the Google Maps API V3 does not supports touch event? Is this is true or false?
UPDATE
This issue was handled in the bug
https://issuetracker.google.com/issues/35824421
and was solved in version 3.27 of Google Maps JavaScript API in December 2016.
In my experience, the mousedown, mouseup, dragstart, dragend events work fine in place of touchstart, touchmove, touchend.
google.maps.event.addListener(myMap, "mousedown", function(event){...});
I'm pretty sure that gesture events are not going to be supported, since those are used for pinch-zoom functionality.
If you need gestures, you'd have to build your own recognizer by tracking mousedown events, storing them in an array, then tracking positions to determine angles, distances etc...
They aren't currently supported. See here for an interactive map that shows demonstrations of currently available events:
https://developers.google.com/maps/documentation/javascript/events#EventsOverview
This page also states that:
For a complete list of events, consult the Google Maps JavaScript API
Reference.
Touch related events are absent from that page, therefore they aren't supported.
Commenting on the accepted answer, the events that are supported are not strictly equivalent (a touch is clearly semantically different from a mouse click), and in my experience results can be variable (for example in some cases a touch can result in firing of an onclick event on Google maps, and in some cases it can result in firing of a mouseover event), so some fall-through handling may be required to reliably handle this type of occurence when 'borrowing' these events to detect touch.
Here's a good article on handling touch with a listener:
https://www.google.com.au/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&ved=0ahUKEwiwm6y38dXXAhWHVbwKHRdUCY4QFggmMAA&url=https%3A%2F%2Fmedium.com%2F%40david.gilbertson%2Fthe-only-way-to-detect-touch-with-javascript-7791a3346685&usg=AOvVaw3pWv0R_AESWKqwF72D0hix
Using mousedown, mouseup with e.domEvent.pointerType == "touch" makes it possible to detect the event type:
map/marker.addListener("mousedown"/"mouseup", (e) => {
if(e.domEvent.pointerType == "touch") console.log("touch");
else console.log("mouse/pen")
});
NOTE: e.domEvent.pointerType doesn't work for mousemove (which is BTW only available on map and not on markers) So I would recommend using the document.addEventListener() for mousemove/touchmove + flagging the current mouse/touch down/up state of the map/marker to spot the mousemove event type.
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)
If certain conditions are met when an infoWindow is closed, I want to prevent the default close event that is fired. Is it possible to achieve that? I tried a number of things like:
Stopping event propagation
returning false from the callback method
there aren't any methods/properties exposed by the infoWindow either that prevent close.
Please let me know if this is possible.
The InfoWindow doesn't really provide a way to step event propagation. I don't know if it could work for you, but there is an InfoBox Utility Library that does give you a great deal more of control oven its behavior. Specific to your question, the InfoBoxOptionsapi-doc object includes the property:
enableEventPropagation, a boolean, that will allow you to control whether the InfoBox will: propagate mousedown, click, dblclick, and contextmenu events in the InfoBox (default is false to mimic the behavior of a google.maps.InfoWindow). Set this property to true if the InfoBox is being used as a map label. iPhone note: This property setting has no effect; events are always propagated.
The only thing you can do is catch the closeclick event which leads you nowhere.
I have hacked something together once, for a one-off solution, that might or might not work for you: I have identified a way to get to the x-mark that the user clicks to close, and removed that. The user can't close the infoWindow. At all. You still can, by calling .close().
WARNING! THIS IS A HACK
var a=document.getElementById('map_canvas');
var b=a.getElementsByTagName('img');
var i, j=b.length;
for (i=0; i<j; i++) {
if(b[i].src.match('imgs8.png')){
if(b[i].style.left=='-18px') {
c=b[i].parentElement.parentElement;
console.log(c);
if(c.innerText.match("Map data")) {
console.log('no');
} else {
b[i].parentElement.removeChild(b[i]);
}
}
}
}
Now. If you store a reference to the [x] mark, you could even turn it on and off at will.
EDIT:
A demonstration of this hack
You could always listen for the close event and then throw a javascript error to keep it from closing. Ex:
google.maps.event.addListener(my_infoWindow, 'closeclick', function(e){
// Throw an error to stop the close
throw "stop close";
})