OverlayView auto position Google Map V3
I have created a div with开发者_运维技巧 100% height and width what i want is to to open an overlay on a pushpin click but i wanted to position overlay according to screen bounds, so it does not pan the area to fit the the view.
This is the code i am using, but it is not working if i pan the pushpin to the corners of the map and then click to open overlay.
<html xmlns="http://www.w3.org/1999/xhtml">
//text overlays
function PropertyDetailOverlay(pos, txt, cls, map){
// Now initialize all properties.
this.pos = pos;
this.txt_ = txt;
this.cls_ = cls;
this.map_ = map;
// We define a property to hold the image's
// div. We'll actually create this div
// upon receipt of the add() method so we'll
// leave it null for now.
this.div_ = null;
// Explicitly call setMap() on this overlay
this.setMap(map);
}
PropertyDetailOverlay.prototype = new google.maps.OverlayView();
PropertyDetailOverlay.prototype.draw = function () {
var overlayProjection = this.getProjection();
// Retrieve the southwest and northeast coordinates of this overlay
// in latlngs and convert them to pixels coordinates.
// We'll use these coordinates to resize the DIV.
var position = overlayProjection.fromLatLngToDivPixel(this.pos);
var div = this.div_;
// Now position our DIV based on the DIV coordinates of our bounds
var mapWidth = map.getDiv().offsetWidth;
var mapHeight = map.getDiv().offsetHeight;
var boxWidth = 200;
var boxHeight = 40;
var left = 0;
var top = 0;
var xStart = position.x - boxWidth / 2;
var xEnd = position.x + boxWidth / 2;
var yStart = position.y;
var yEnd = position.y + boxHeight;
if (xStart < 0)
left = 0;
else if (xEnd > mapWidth)
left = mapWidth - boxWidth;
else
left = xStart;
if (yEnd > mapHeight)
top = mapHeight - 2 * boxHeight;
else
top = position.y;
div.style.left = left + 'px';
div.style.top = top + 'px';
}
PropertyDetailOverlay.prototype.onAdd = function () {
google.maps.event.addListener(map, 'bounds_changed', function () {
txt.bounds_ = map.getBounds();
txt.draw();
});
// Note: an overlay's receipt of onAdd() indicates that
// the map's panes are now available for attaching
// the overlay to the map via the DOM.
// Create the DIV and set some basic attributes.
var div = document.createElement('DIV');
div.className = this.cls_;
div.innerHTML = this.txt_;
// Set the overlay's div_ property to this DIV
this.div_ = div;
var overlayProjection = this.getProjection();
var position = overlayProjection.fromLatLngToDivPixel(this.pos);
div.style.left = position.x + 'px';
div.style.top = position.y + 'px';
// We add an overlay to a map via one of the map's panes.
var panes = this.getPanes();
panes.floatPane.appendChild(div);
this.toggle();
}
//Optional: helper methods for removing and toggling the text overlay.
PropertyDetailOverlay.prototype.onRemove = function(){
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
}
PropertyDetailOverlay.prototype.hide = function(){
if (this.div_) {
this.div_.style.visibility = "hidden";
}
}
PropertyDetailOverlay.prototype.show = function(){
if (this.div_) {
this.div_.style.visibility = "visible";
}
}
PropertyDetailOverlay.prototype.toggle = function(){
if (this.div_) {
if (this.div_.style.visibility == "hidden") {
this.show();
}
else {
this.hide();
}
}
}
PropertyDetailOverlay.prototype.toggleDOM = function(){
if (this.getMap()) {
this.setMap(null);
}
else {
this.setMap(this.map_);
}
}
var map;
var _prevOverlay;
function init(){
var latlng = new google.maps.LatLng(37.9069, -122.0792);
var myOptions = {
zoom: 4,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: "Hello World!"
});
AddMarker(latlng, marker);
}
var added = false;
function AddMarker(latlng,marker) {
customTxt = "<div style='width:200px;height:40' >60th Ave, Mercer Island</div>";
txt = new PropertyDetailOverlay(latlng, customTxt, "customBox", map);
google.maps.event.addListener(marker, 'click', function () {
if (_prevOverlay != null && _prevOverlay != txt)
_prevOverlay.toggle();
txt.toggle();
_prevOverlay = txt;
});
google.maps.event.addListener(map, 'click', function (event) {
if (_prevOverlay != null)
_prevOverlay.hide();
});
google.maps.event.addListener(map, 'bounds_changed', function (event) {
if (_prevOverlay != null)
_prevOverlay.hide();
});
}
</script>
<style>
.customBox
{
padding:5px;
background: #0866C3;
border: 1px solid white;
-moz-border-radius: 5px;
border-radius: 5px;
position: absolute;
}
</style>
<style type="text/css">
html
{
height: 100%;
}
body
{
height: 100%;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body onload="init()">
<div id="map" style="height:100%;width:100%">
</div>
</body>
Regards
http://gmaps-samples-v3.googlecode.com/svn/trunk/smartinfowindow/smartinfowindow.html It works fine out of one condition. If the window has to come near to a corner it sucks. But it has an easy code and you can edit it.
加载中,请稍侯......
精彩评论