I've noticed that the google maps API (and google maps in general) always anchors maps to the left-hand side of their container, like here (resize the window).
I have a situation where I'd like the map to be anchored to the right hand side. I can't find anything in the API docs referring to this. Is it possible?
The answer to this question suggests re-rendering the map with an event listener on resize but this isn't preferable as I'm looking for the effect of a sidebar panel sliding in and 'over top' the map rather than pushing it to the side and then having the map re-center itself afterwards.
How about adding an Event listener on the 'resize' or 'bounds_changed' event?
google.maps.event.addListener(map, 'resize', function(event) {
map.setCenter(myLocation); //
});
This should center the map smoothly as the containing div is resized.
Notes:
You might have to create the resize event manually.
'map' is a Map type object from the Google API
'MyLocation' is a LatLng object
var myLocation = new google.maps.LatLng(-33.679216211612086,151.3031796875);
Related
I am using the Bing map version 7 for the displaying the events and its details on map. For that i have added the following reference js file "http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&mkt=de"
I have implemented the displaying the event pin on map and displaying the event details in infobox. I am stuck up with displaying event details in infobox which are on the boundary of the map. This infobox goes outside the map.
I have found on solution in the post
Cool Infobox and plot polygons through xml ....in bing maps , pure javascript
But even after implementing the solution mentioned(CustomInfoboxModule) in above link, i am facing the issue for the events having more details.
Check for the
Not 100% sure if I understand the question. Is your issue that the infobox falls outside of the map? If so, if you make your Infobox big enough this is bound to happen. There are a couple of solutions:
Limit the size of your description area (i.e. give it a max-height) and make it scrollable (i.e. overflow-y: auto). This will ensure that your infobox never exceeds a certain height. The custom infobox control you are using, positions the infobox based on which quadrant the pushpin is in. If the pushpin is in the top left corner the infobox is shown to the right and down. If the pushpin is in the bottom right corner the infobox is shown to the left and up. This means that if you ensure that the max height of the infobox is half the height of the map, that it should always be displayed within the map.
Alternatively, if you know the infobox will never be bigger than the height of the map, you could simply reposition the map so that the pushpin is higher and then open the infobox.
I am using Google map API Version 3 with jQuery mobile. I created marker on map then also 1 marker for current position and then I want to print path between two points like current point and some specific spots. For doing this I generated popup with list of fixed spots user can select any and processed after popup application back to map and tries to plot a route on map but in Chrome the map view is destroyed and shown just in corner. Only in Firefox no issue arise.
This usually happens when you load your map inside a hidden element or you change your elements properties after loading a map inside it. If that is the case
google.maps.event.addListenerOnce(map, 'idle', function() {
google.maps.event.trigger(map, 'resize');
});
this might solve your problem.
I have a 'moveend' listener established on an OpenLayers map. I can pan or zoom the map and the listener fires as expected. I also have the need in this app to programmatically change the zoom and the center location, however, when I do the 'moveend' listener fires. Is it possible to distinguish between user-driven view changes and programmatic view changes in OpenLayers?
I am using JavaScript OpenLayers version 2.12.
I don't think there is a way to distingish. But here's what you can do. When you programmatically zoom or change the center location, you can temporarily unregister the moveend event, and then re-register it afterwards:
map.events.unregister( "moveend", map, function );
.
.
programatically zoom
.
.
map.events.register( "moveend", map, function );
Also, when zooming or moving map programmaticaly, you could set some variable to true.
In listener, check that variable. If it's true, map is moved programmaticaly. After checking, set it back to false.
If a marker is clicked near the top of the map viewport, the infowindow loads outside the viewable area and the map must be dragged to see infowindow content.
Ideally I don't want the map to auto pan. Is there a way to load the infowindow in a different direction, e.g. if the marker is at the top of the viewport to display the infowindow in a downward direction.
No, you can't open google's default infowindows in a different direction since you don't implement your own infowindow class. But you can disable auto-pannnig simply passing TRUE to disableAutoPan property of InfoWindowOptions object like documentation said.
There is an example that used to be part of the Google Maps JavaScript API v3 Code Samples, that has moved over to GitHub, named: SmartInfoWindow. It does exactly what you are describing. Check into the underlying code and that should get you going in the right direction.
I have a google map inside of a div which gets changed, its parent div can get an additional class which changes its dimensions. This changes causes the google map not to get updated, it resist in the previous dimensions. How can I refresh the google map?
I tried to recreate the google map again but it seems to keep the other previously created google maps there as well. This causes sometimes strange behavior (the old map is on the top of the new). Can a google map be released?
Thanks for your help!
Check the google.maps.Map class reference, I think you're looking for the resize event:
Developers should trigger this event on the map when the div changes size:
google.maps.event.trigger(map, 'resize')
While re-sizing the existing map would be more elegant, as a workaround you can empty the container div before re-creating the map, e.g. while (div.firstChild) div.removeChild(div.firstChild) or $(div).empty().