Google Maps ignore region of placeholder container - javascript

Example situation: my Google Maps map is in div#maps. div#maps has a half transparent menu layn over it on the top. That means the top 100px of div#maps is unclickable. However, when I for example use a function like "fit maps to marker bounds", the topmost marker will be underneath the overlying menu.
Is there a way to tell Google maps that the map should be rendered in the full div, but that the area that we're working in should be 100px off the top?

Answer has been given before. I didn't know the right words for asking the question so I couldn't find an answer to it, but, as pointed out in comments, answers can be found here:
How to offset the center of a Google maps (API v3) in pixels?
How to offset the center point in Google maps api V3
https://stackoverflow.com/a/26192440/1238965

Related

Add a back button in google maps

My current implementation is, when I open the html via browser it zooms to North America map with 4 markers. On click of the markers, the maps is zoomed to that location with few more markers added. Now I would like to add a back button so when the button is clicked it should take me to the initial maps page with 4 markers.
Your help is much appreciated.
Thanks,
Chitra
The features of Google Maps API that you will need to use are bounds. For a rough understanding, imagine providing a top left corner point and a bottom right corner point and just telling the viewport to zoom and track to fit them in. There is a good answer here: Google Map API v3 — set bounds and center
As for how you implement the actual button to trigger the feature, that is a separate question and there are many potential solutions. Again, it has already been discussed here: Put a button on top of a google map

How to show zooming bar in google map

I am using the following google map and everything looks perfect:
Google map
The only problem is that when a person zoom in to the street level and wants to zoom out he needs to have a mouse and use mouse wheel and if he does not have mouse working with this map is a pain.
So I need to put zooming bar for example at left side of my map like this:
Is it possible to do that and how can I do that?(I appreciate any help)
You need to add the control to your map, like this:
map.addControl(new GSmallZoomControl());
You can find more information about GMaps controls here: https://developers.google.com/maps/documentation/javascript/v2/controls
This quote is from the above mentioned documentation
GSmallZoomControl - a small zoom control (no panning controls) used in the small map blowup windows used to display driving directions steps on Google Maps.

google maps api: display an arrow to indicate that there is a marker not visible on the map

I've an html application that uses javascript Google Maps API to display some points (markers). Some of the points may not be visible in the current user map (due to zoom, position, etc.). I was looking for somehow to represent this points, for example, an arrow on near the border of the map indicating the direction.
Is there any function / library that may help?
In case there isn't.
I've analyzes how to implement this by myself. The direction of the arrow can be achieved by (MarkerPosition - CenterPosition).normalize(). However, how can I draw that arrow in the correct position on the border of the map?
Thanks!
I've developed a solution to the problem.
Source code can be found at github.com
https://github.com/mateuyabar/GmapsHiddenMarkers
And a sample map

OpenLayers, Bing, continuous map layer

I'm trying to get the Bing layer continuous in OpenLayers, but I cannot find any solution.
As we can see on example (http://openlayers.org/dev/examples/bing.html), when we scroll the map horizontally or vertically, layer is not continuous as the Google map is (http://openlayers.org/dev/examples/google.html). It's quite weird when we zoom out and the map doesn't fit into viewport leaving blank white background on the left and right side.
Any ideas?
Thank you.
This example shows how to achieve horizontal repeat:
http://openlayers.org/dev/examples/wrapDateLine.html
Not sure how to solve the white background when zoomed out, I do not think Openlayers supports this.

OpenLayers zoom style like GoogleMaps

In GoogleMaps when users zooms In/Out using mouse wheel the point under cursor stays the same (its coordinates), but OpenLayers map has different approach - when zooming center of the map is constant. Can one use GoogleMaps zoom style in OpenLayers map?
EDIT:
Actually current behaviour in my OpenLayers is that when I zoom in with some position under the cursor it moves that position to map center on the next zoom level. Probably it is some issue related to my map specific settings (like projection).
I guess you are using OpenLayers.Control.MouseDefaults control for navigation. Well, you shouldn't, because this control is replaced with OpenLayers.Control.Navigation and will be deprecated in OpenLayers 3.0.
A quick look at source code for MouseDefaults shows that it definitely centers map on the cursor position:
defaultWheelDown: function(evt) {
if (this.map.getZoom() > 0) {
this.map.setCenter(this.map.getLonLatFromPixel(evt.xy),
this.map.getZoom() - 1);
}
},
While cursor stays at the same position the map will centered to new location every time you zoom in/out, which is confusing.
OpenLayers.Control.Navigation uses the same approach as Google Maps. OpenStreetMap uses it and you can see that it works the same way here
Actually, when looking at the Basic Example at OpenLayers, it seems like the map zooms around the mouse pointer, just as Google Maps does. Or am I missing some detail in your question?

Categories