Loop draggable map like Google maps - javascript

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

Related

Google Maps InfoBox preventing scroll

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 want to scroll zoom in and out of an image, but also have pins on that image stay positioned correctly. jQuery

So I want to make a scroll zoom feature on a map I have created. The map contains an image and a number of divs positioned on top of the map marking out positions (pins).
I have found a number of jQuery tools which allows me to scroll zoom on an image. And I could probably try and use the mouse position and scroll amount to edit the coordinates of my divs as well. Is this the best way of going about this, or does anyone know any jQuery tools that will allow me to scroll zoom in and out of divs?
Here are some tools I found for scrolling on images.
image zoomer
Wheel zoom
You could try using leaflet.js. It is a lightweight javascript library meant to be used for maps, but it also work for images. This tutorial could help you start, and you might want to check this post.
Here is a very basic example of what it could look like.

Google map drags while scrolling

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.

Remove bottom left hover from bing maps

When implementing a bing maps based solution, the logo on the bottom left (highlighted in image above) causes a search box to appear to search with bing. Has anyone been successful in disabling this feature?
Ideally the solution will not involve disabling hovering events on the map completely, as there are hover events that we have implemented to provide functionality.
When initialising the map, set the enableSearchLogo property to False.
http://msdn.microsoft.com/en-us/library/gg427603.aspx

JavaScript Closure issue

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/

Categories