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;
Related
I am using maphilight from jQuery to work on a map and it works perfectly fine for me. I just don't want to use a shape to display on the map, I would like to display an image (instead of a circle or a rectangle). Is there any way to do this?
Actual site is here: www.abitraum.com/karte.php
any help would be appreciated. Thanks!
Instead of using map area you could use absolute css values to put a image on top of your map.
Underneath your main map div you could put another div with an image e.g.
<div style="position:absolute; left:300px; top:400px;"><img src="xyz.jpg" /></div>
Repeat this for all the images you want to do this for.
The left:300px means it it 300 pixels from the left side of the screen, top:400px means it is 400 pixels from the top of the screen. Although if you plan to have the image in the center of the page or something like that, it might be more useful to use margin-right:300px instead of left:300px;
Also I would recommend using a CSS file rather than putting things directly into the style of the div.
let´s say this is the very right of my google map :
i have a box with opacity there containing information, i wonder if there was a way
to let overlays like markers not appear behind the box or define an area for them or add an overall overlay margin padding or sth like let google scroll the map until the infowindow is in full sight as google does when its not on the map
maybe someone has an opinion to this?
could there be an easy overridal?
for any hint
thanks in advance
create a custom control at control-position RIGHT_CENTER with a width equal to the width of the box and a height of 0.
With the height of 0 this control will be hidden, but the API will still recognize this control and will try to pan the infoWindow to a position where it's not covered by the control.
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.
Here is my css for my map div:
#map {
position: fixed;
top: 9.48em;
bottom: 2.2em;
}
My OpenLayers map is rendered in this div. Everything works fine. But as soon as I add a
overflow:auto;
property in the css above, the zooming using scroll wheel on my map gets disabled. I need to add this property because now i need to show some tables in place of map.
I suspect that when i add scroll bars the event of scroll wheel is not reaching the OpenLayers.
Any way around this problem by fixing the css or some OpenLayers Code?
I know I can do it by adding some logic in JS that changes css property dynamically depending on the page being loaded, but unless absolutely necessary, I don't want to go that route, and find the clean solution.
Thanks.
Good question, that’s by design: if you are on a scrollable div, OpenLayers won’t do anything (it will check the overflow style for this), otherwise, it will scroll the map.
Look at the source for explanations: https://github.com/openlayers/openlayers/blob/master/lib/OpenLayers/Handler/MouseWheel.js#L149
The check for overflow style is here: https://github.com/openlayers/openlayers/blob/master/lib/OpenLayers/Handler/MouseWheel.js#L124
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/