Google maps, set space for overlays - javascript

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.

Related

Pan map while zooming to feature

In my app when I click on a feature displayed on the map it zooms in and everything is centered correctly.
map.getView().fit(feature.getGeometry(), map.getSize())
However, I'd like to zoom in to some pixels left or right from this feature. I cannot see any fit property about that. How can I do this?

Leaflet fixed pop-up position

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 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.

Clustering in Google Maps

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.

Background Image in an Image Map

I am trying to make a user generated nav bar.
This nav bar because it is dynamically created may have more tabs on it than the width of the nav bar.
That being the case, I would like to make it so that the nav will scroll from left to right.
Currently I use an image mapping technique where I plot coordinates on an image and move divs based on position which calculates speed and direction of movement.
The problem is background images may not have image maps applied to them. The general workaround is to create invisible divs on top that would represent my coordinates, but since my text would be there, and I don't want to mess with a z-index at all, that option is deprecated.
Any ideas how to do this any other way?
Here it is.
http://valums.com/scroll-menu-jquery/

Categories