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.
Related
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.
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 am using the map.fitbounds to fit all the markers I have set with in the map viewport, but the markers are right up against the sides of the viewport and I want to zoom out just a little.
I have tried
map.setZoom(map.getZoom() - 1);
but is moves out too much and seems to zoom with the viewport to the top.
Ideally I want to emulate what happens when I scroll the mouse wheel 1 click to zoom out just a little.
You can see the sample file with the issue here.
http://dl.dropbox.com/u/1367679/MapLifeEvents.html
As you can see ideally you want to be out just a little to show the markers at the base.
The zoom levels in google maps are not continuous so you can't adjust the level the way you want.What you can do is create a LatLngBounds object and use it's extend method the markers you have and lastly use the panToBounds method of map to make the map fit your markers.
In the description of this last method you will see the following
Pans the map by the minimum amount necessary to contain the given
LatLngBounds.It makes no guarantee where on the map the bounds
will be, except that as much of the bounds as possible will be
visible. The bounds will be positioned inside the area bounded by
the map type and navigation (pan, zoom, and Street View) controls,
if they are present on the map. If the bounds is larger than the
map, the map will be shifted to include the northwest corner of the
bounds. If the change in the map's position is less than both the
width and height of the map, the transition will be smoothly
animated.
Hope it helps
My Google Map (v3) renders two types of markers:
An area marker ("Your home is in this area"), a semi-transparent graphic with a circle denoting an approximate area on the map.
Many attraction markers (beaches, restaurants, shopping, etc.)
Each attraction marker has a click handler that opens an info window ("Bob's Bugs - the best fried bugs in town!"). Registering the click handler also seems to create hover handlers that change the mouse-pointer to a hand, display a tooltip, etc, which is fine. I am defining no event handlers for the area marker.
However, for the attraction markers that are within span of the area marker, neither the click nor hover handlers fire. I would guess that it is a z-index issue, that somehow the big area marker, is lying on top of the attraction markers, is intercepting the hover/click events, and is not passing them through. In fact, a hover on the area marker results in the its tooltip, suggesting to me that it is definitely picking up the event.
I have set the z-indexes of the various markers - high z-index for the attraction markers, low z-index for the area markers. The visual rendering and examination of the DOM suggests that the z-index values are actually being set as I want.
But somehow the intersecting attraction markers are not receiving their click/hover events. Other attraction markers respond correctly to their hover/click events. In fact, for an attraction marker that only partially intersects with the area marker, the external portion of the marker responds to the hover/click events.
Per this answer, I tried calling:
google.maps.event.clearInstanceListeners(this.areaMarker);
in the hopes that perhaps there were some default handlers getting in the way. No love.
Is there some way to tell the area marker to get the heck out of the way? Any other ideas welcome.
The solution seems to be to use an ImageMapType overlay for the area marker. These overlays will not intercept any of the hover/click events.
I have a map that is position:fixed on my page. So when I scroll down it stays with you on the page When I roll over the pinpoints on my map the InfoBox displays in the correct position, but when I click one of my results which triggers the Infobox to display it is relative to where the map was when the page loaded (so usually high up on the page and not down where I scrolled it). I am trying to manipulate where the info box displays using the ShowInfoBox, but it always needs LatLong Coordinates instead of pixel coordinates. Since the map moves up and down the page the pixel location could change depending on how far you scroll.
Right now I am just poitioning it with javascript after it loads but that is a less then ideal situation as I run into all sorts of problems.
It's probably a bug with Bing Maps that it doesn't position the infobox correctly. You'll have to work around it. The infobox most likely has a unique ID or a unique class that you could select. Using that you can manipulate the infobox once you set the new Lat/Long position.
When you display the infobox, after you call the show method with the Lat/Long you should then reposition the infobox using CSS based on the scroll positon. So, if the page has scrolled down 100 pixels you need to add 100 pixels to the "top" css property. The same goes for the "left" property. This should always result in your infobox appearing in the correct place.