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.
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.
For example, I want to set a leaflet marker always pin to the bottom-right corner of the leaflet map.
Does anyone have ideas about this?
There are a couple of ways to approach this, depending on what you want to accomplish.
This request for a centered "floating" crosshairs icon sounds very similar to your request. You essentially use getCenter() to create a fixed reference point, then use setLatLng() to update your marker's location relative to the map's center each time the user pans.
If the point you'd like to pin is purely cosmetic, you could just use HTML and CSS to position it on the page. This example, which is also referenced in the previous example, uses CSS to position an icon within a span as a visual reference point, then takes advantage of getCenter() to add lat/lon values to the form on the left of the page.
You can make use of getCenter(), getSize(), and L.marker() to pin to the bottom-right.
Reference: http://leafletjs.com/reference.html
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);
I have one custom div with any info and google map with many markers. On click on marker I want the div to appear next to the marker. I use api v3. Could you help me to find solution?
Actually I want to know offset position of a marker in html window.
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().