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/
Related
I have create my map with Leaflet exactly how I want it (with my markers and externals links).
I would like to have the popup always fixes in the top right hand corner (for an example). Is there any way to fix the popup's location ?
This is how it should be: jsfiddle.net/expedio/z1nw3pt4/
but i want to use other markers not the red dots..
Thank you in advance!
(It works but its not showing in a div box in the map, its showing below the map in text..)
Got the answer!
just had to change my CSS from : display:none; to display:block !important;
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
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.
So, I have a map embedded in a hidden div, that when the link is clicked, the division drops down and reveals itself, however, it won't stay centered on the LatLng I've set. I've read a few articles regarding this and they say you have to initialize the map after displaying the div, but I'm having trouble applying this to my code. Here's what my current header code looks like. The class I apply to the link is 'action' and the class of the dropdown division that it's contained in is called 'content'.
http://pastebin.com/wQc6RrSJ
Sorry if I missed anything.
Thanks in advance for the help, Bc.
You could try 2 things:
Fire the resize event of the map:
google.maps.event.trigger(map, 'resize')
If that doesn't work, just call the setCenter method again after resizing the div.
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.