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.
Related
With the Google Maps JS API new renderer, as of v3.32, infowindows placement seems wrong. They are not panned outside of map controls areas. The best example is directly from Google Maps Platform docs. If you go here and click on the marker you'll see what I'm talking about: https://developers.google.com/maps/documentation/javascript/examples/infowindow-simple
See bottom of question for printscreen.
I searched a lot for some information on this change of behavior, if that's by design now, in case we'd have to handle this in code, but can't seem to find anything regarding this. What would be the API way to deal with this ?
Looks like it's partly been fixed in the weekly channel (current = 3.34). So you can load your map with https://maps.googleapis.com/maps/api/js?v=3.34&key=...
and the infowindow should move out of the map control's areas. It seems though it will not pan out of custom controls areas, which it used to do before the new renderer.
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
I am using protractor to test my angularjs application built with ng-map for google maps directive.
In the test, I could zoom in/out but clicking on +/- visible in the maps.
However, to pan the map, there are no controls in Google Maps Javascript API v3.
So I thought of sending a right arrow key event to the browser to simulate the panning towards East direction.
browser.actions().sendKeys(protractor.Key.ARROW_RIGHT).perform();
browser.sleep(5000); // To hold the browser to notice the change.
However, when I run it, I do not see any change in the view of the Map.
Solved this in the comments above -- I tried manually on our app which uses google maps, sending a right arrow should work after giving the map focus. So my suggestion is to try clicking on the map first before performing the right arrow.
var map = element(by.css('div.google-map'));
map.click(); // give the map focus
browser.actions().sendKeys(protractor.Key.ARROW_RIGHT).perform(); // move map
browser.sleep(5000); // To hold the browser to notice the change.
I have a map application that can be seen here:
http://chrismcaleenan.com/map/?page_id=25
Each of the Malaysian states in the application will have an InfoWindow that displays additional information. You can see an example of this by mousing over 'Kedah' either in the main data table on the right or on the state itself in the map.
The problem, as you can see, is that the map pans in order to position the InfoWindow. Is there a way to fix the map position and set the InfoWindow size or position so that it is fully displayed without panning? In the Kedah example, one could have the InfoWindow positioned directly to the right and/or use a shorter tail.
One option would be to create a custom graphic for each state, but I'd rather avoid this as I will be running into the same issue with add'l data (e.g. click Kedah to zoom - will have InfoWindows on all data points on zoom).
If you're playing around double-clicking the water will zoom back out and reset map.
Thanks!
Yes, and sometimes the pan pulls the mouse outside of the state, which causes the InfoWindow to disappear. I know that's not what you want. The Google Maps demo catalog includes a sample that I think will give you what you want for your map. It's named SmartInfoWindow. Take a look, click on some of the markers, check out how the SmartInfoWindow behaves, and see if that might help you achieve what you want. It's not perfect, but it keeps the pan at the absolute minimum.
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?