What's the best way to recalculate the position of the infobox in a way it's always trying to be full draw inside the map but without moving the map.
So if I try to open an infobox that is close to the right edge of the window it should draw the infobox to the left of the marker not on top of it, or to it's left.
is there a framework for that ?
Thanks !
My infobox options per request.
var myOptions = {
content: this.bigInfo(variables)
,disableAutoPan: false
,maxWidth: 0
,pixelOffset: new google.maps.Size(20, -60)
,zIndex: 9
,boxClass: "bigInfo"
,closeBoxMargin: "-9px -9px 3px 3px"
,closeBoxURL: "./img/close.png"
,infoBoxClearance: new google.maps.Size(100,100)
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: false
};
What's the best way to recalculate the position of the infobox in a way it's always trying to be full draw inside the map but without moving the map.
So if I try to open an infobox that is close to the right edge of the window it should draw the infobox to the left of the marker not on top of it, or to it's left.
is there a framework for that ?
Thanks !
My infobox options per request.
var myOptions = {
content: this.bigInfo(variables)
,disableAutoPan: false
,maxWidth: 0
,pixelOffset: new google.maps.Size(20, -60)
,zIndex: 9
,boxClass: "bigInfo"
,closeBoxMargin: "-9px -9px 3px 3px"
,closeBoxURL: "./img/close.png"
,infoBoxClearance: new google.maps.Size(100,100)
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: false
};
- Can you show your infobox options code? – Heitor Chang Commented May 11, 2012 at 15:53
- Don't like to bug you again, but how exactly are you getting the finished infobox on screen? In particular I'm interested in how you set the width and position. Are they fixed? Depend on the text length? I use the options above and only get a transparent field, with my static text. – Heitor Chang Commented May 11, 2012 at 17:00
- They are fixed but I am fixing it in the css class. – Cristiano Fontes Commented May 12, 2012 at 14:55
4 Answers
Reset to default 3I have a hack for InfoBoxes. It relies on a conversion from LatLng to screen pixels I found in a different question, fromLatLngToContainerPixel. The Google documentation description tells the pixel position is measured in the "map's outer container". However, the answerer warned that its sibling function, fromLatLngToDivPixel. is unreliable because it freezes with a resize or zoom.
So, my code uses fromLatLngToContainerPixel. If you try using my code, play around in your code and see if the offsets need to be changed. In my code I have a fixed InfoBox width of 86px.
Click in the center, and then the edges of the visible area. The map will not move.
Here's the JSFiddle: http://jsfiddle/eHT9U/
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html, body { margin: 0; padding: 0; height: 100% }
#map_canvas { width: 100%; height: 300px }
#container { padding: 10px; }
</style>
<script type="text/javascript" src="http://maps.googleapis./maps/api/js?sensor=false"></script>
<script type="text/javascript" src="infobox_alt.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
var map;
var mapOptions = {
center: new google.maps.LatLng(40.0, -88.0),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var count = 0;
function initialize() {
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap(map);
google.maps.event.addListener(map, 'click', function (event) {
count += 1;
pt = overlay.getProjection().fromLatLngToContainerPixel(event.latLng);
document.getElementById("end").value = pt;
addMarker(event.latLng, "index #" + Math.pow(100, count), pt.x, pt.y);
});
}
function addMarker(pos, content, x, y) {
var marker = new google.maps.Marker({
map: map,
position: pos
});
marker.setTitle(content);
var labelText = content;
var myOptions = {
content: labelText
,boxStyle: {
border: "1px solid black"
,background: "white"
,textAlign: "center"
,fontSize: "8pt"
,width: "86px" // has to be set manually
,opacity: 1.0
,zIndex: -100
}
,disableAutoPan: true
,position: marker.getPosition()
,closeBoxURL: ""
,pane: "floatPane"
,enableEventPropagation: true
,zIndex:-1
};
offX = -43;
offY = 0;
//pare boundaries
if(x > $("#map_canvas").width() - 60) {
offX = -86;
}
if(x < 60) {
offX = 0;
}
if(y > $("#map_canvas").height() - 60) {
offY = -50;
}
myOptions.pixelOffset = new google.maps.Size(offX,offY);
var ibLabel = new InfoBox(myOptions);
ibLabel.setZIndex(-1);
ibLabel.open(map);
var infowindow = new google.maps.InfoWindow({
content: content
});
google.maps.event.addListener(marker, 'click', function (event) {
infowindow.open(map, this);
ibLabel.setZIndex(-1);
this.setZIndex(1);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
end: <input id="end" size="30">
<div id="container">
<div id="map_canvas"></div>
</div>
</body>
</html>
I found this example suits your requirement
http://gmaps-samples-v3.googlecode./svn/trunk/smartinfowindow/smartinfowindow.html
There is a code example, SmartInfoWindow, that does what you describe using an InfoWindow. You should be able to get started in the right direction using that as an example.
I was also getting an issue with this, my solution was to use panBy.
map.panBy(0, -100); // panning to show full infobox (xoffset,yoffset)