I've created a Google Maps map using vue-google-maps, when the user double clicks on the map it zooms in towards the mouse location.
I would like to turn this into a single mouse click, so when the user clicks somewhere on the map it automatically zooms in.
The best solution I could come up with is to listen for a click event and then simulate a mouse double click with dblclick but this doesn't work
$("#certificate-dashboard-map").click(function() {
$(this).dblclick();
});
How could I simulate a double mouse click that would trigger Google Maps ? Any other solutions would also be welcome ofcourse.
It turns out there is a option to enable single click zoom in vue-google-maps, which can be enabled by adding :zoom-on-click="true" to the map component
Related
This is my site : https://rhodan.wixsite.com/chocolade/radar-on-google-maps
I used the Wix editor to add image from my hard disk to this page and used also to add the google maps to this page.
but I have two problems:
how to disable the ctrl key when using the mouse wheel to zoom out/in in the google maps?
I want to use only the mouse wheel and when i try to use only the mouse wheel I'm getting this message I need to use the ctrl key + the mouse wheel and I want to disable and remove that message and only using the mouse wheel to zoom out/in.
the second problem is how can I make the image that I loaded to the page to be part of the google maps I mean now if I try to drag the google map with the mouse on the image part it won't let me only on the parts of the map without the image. the image is not moving with the map when I drag the map to any direction it's like the image is above the map and not part of it.
for example, to make something like this. not using this just the idea:
https://www.weather2day.co.il/rain-radar-google#radar
I am using react leaflet tooltip for a mapbox map.
I'm having a lot of trouble trying to keep react leaflet tooltip open when the mouse is over either the marker or the tooltip itself? I want to be able to open on hover and then click on something inside the tooltip, and I want to close when the mouse leaves the marker or the tooltip.
So if the mouse is in the red then the tooltip is open, and if it is not, then the tooltip is closed.
Any pointers appreciated
I tried what was available in the api https://leafletjs.com/SlavaUkraini/reference.html#tooltip, but I think there may be more customization I don't have the expertise to build may be needed to pull off this behavior.
One way to do it is to not set it to close when the mouse leaves.
Then it will be up to the user to either click on the map or click "close" to close the popup.
If any other markers are hovered that show popups then the original one will be automatically closed.
See the code in this codesandbox, There are several overlapping icons.
I can click on the icon, and get a of all the overlapping features.
But if I click again on the same icon, no more events are generated.
I could deselect by clicking away, but this is not what I need.
How do I make the on('select' fire on each click?
The reason why I want to do that, is that I have a counter that chooses different feature on each click. Which is possible on google maps, but I can't figure it out on openlayers.
I have a Leaflet map and I want to completely disable panning whether using the mouse, touchscreen, or keyboard, so that the map appears like a static image. I have added map.dragging.disable(); which works for mouse dragging.
But when the map container is focused using the Tab key, pressing the arrow keys on the keyboard will still pan the map. Is there any solution for this?
I think that there are a couple options on Leaflet maps that should resolve your issue.
First, the dragging option, if false, should prevent the mouse from dragging the map.
Next, the keyboard option, if false, should prevent the user from navigating the map with the keyboard.
Also, you should consider setting doubleClickZoom to false if you want your map to be static.
Finally, examine the map option documentation to ensure that I haven't missed any relevant options.
Hope this helps.
I am looking for a way to detect if tiles of google maps v3 are loading or and event which triggers when tiles start loading.
My UI is build as follows:
There is a map on background layer.
On the foreground there is a form in which user enters location.
After he hits enter, map is panning and zooming to specified location.
All I want to do is hide foreground layer AFTER:
1. Map is zoomed
2. Map is panned
3. All tiles are loaded
The problem is that when typed location is very close to starting location, there is no "tilesloaded" event triggered because map panned only few pixels. So I can't depend on "tilesloaded" event.
I can't also depend on "bounds_changed" or "idle" event because they trigger BEFORE all tiles loads.
Do you have any ideas ?
You may:
listen for the tilesloaded-event and hide the form when it fires
to catch the case where tilesloaded didn't fire store the bounds(when opening the form) in a variable. Observe the bounds_changed -event and check if the difference(in screen-pixels) between the northeast/southwest of the stored bounds and the current bounds is less than 256(that's the size of a tile). When it does you may assume that there are no tiles to load, trigger the tilesloaded-event immediately.