I used a Google map in my site, and the container div which contains the map is draggable. Now my problem is that when I scroll the map, it also drags. I want to stop dragging when of map scrolling. How can I do this?
Can you provide more detail? If the google map fully fills your div, how do you plan to drag the div? If it does not fully fill the div (say there is a border around the map), then in the mouseDown you can check the sender is the div and not the map. Then you can move the map by dragging the map, or the div and map by dragging the border.
Related
On one of our main pages, Leaflet map occupies 90% of the page with only the top nav (position: fixed;)
But on touch devices, user can accidentally zoom-in not on a map, but on the entire page. If they do - there is no way for them to un-zoom to see the top nav, because any touch action would zoom-in-out the map.
Ideally, I'm trying to find solution so that the page would zoom-out, after Leaflet reaches minZoom level. Any other ideas are welcome! Thanks!
Cannot be done.
Leaflet relies on the touch-action CSS property to prevent the browser from pinch-zooming the whole page.
Note how there is no value for that property that allows to pinch-zoom only out. Leaflet can only enable/disable pinch-zooming as a whole.
You could disable the touchZoom handler of the map by running something like map.touchZoom.disable(), or map.on('zoomend', function(){ if (map.getZoom()===map.options.minZoom) map.touchZoom.disable() }) but that will disable all pinch-zooming in Leaflet, and enable all pinch-zooming of the whole page.
I am using InfoBox to display information boxes on a custom Google map, but when the user is scrolling around the map with dragging (ie. on an iPad or other mobile device, or with their mouse), attempting to drag on an open InfoBox window does nothing (ie. the map doesn't move).
Is there some way to allow the drag scrolling to continue, even while on an InfoBox? I feel like it should just be a simple option but I can't see anything in the documentation.
I've tried moving the InfoBox to the mapPane (instead of the floatPane) but it didn't help.
I'm building a map with a draggable div containing map-image-pieces and cities on it as a positioned divs. Please if anybody knows how can I make it loop like Google Maps. When I drag "east" of Japan I need to navigate to Hawaii.
I found a couple of "endless vertical scroll" scripts on jsfiddle, but all of them are just scrolling to the top and not draggable.
Here is my map: http://worldradiomap.com/map/map and here is an example of how I use it in an iframe: http://worldradiomap.com/map/east-asia
Basically, I have to load two google maps, one dependent on the another. In my main div, I am locating certain points on world map and showing InfoWindow. Now On click of each of the InfoWindow, I need to load the same zoomed out place in another div. I have a bottom div, which will load this place with the latitude and longitude as center of this place and basically a zoomed out version of the place from main Div.
I have set up a fiddle and I am actually not able to pass the center of the Main Div to bottom Div, google map.
Her is how I am doing this:
http://jsfiddle.net/refhat/SN8s4/2/
Help is appreciated.
you did not pass position to loadingAnotherMap. I have updated jsfiddle here:
http://jsfiddle.net/SN8s4/3/
I have developed an application using google maps v3. Here, I need to show some markers at the initial zoom level. The problem is on mouseover of the marker, I need to show a div content. The div is not properly aligned, that is for the marker on the extreme left or right, the div is getting partly hidden. How do I show the div with proper alignment viz., inside the map itself? could someone help me with this please? Thanks in advance.
First get the size of the map canvas div, then capture the x coordinates of the marker.
For the mouseover event, write a conditional statement so that if the marker's x coordinate are too close to the left edge, add extra pixels to the x coordinate of the floating div so the floating div shifts to the right to go inside the map canvas. (If the marker is too close to the right edge, reduce the value of x coordinate by certain pixel so that the floating div shifts to the left a bit.)
How much to add or reduce the value of x coordinates depend on how big the floating div is.