Google Maps overlays hijacker mine events i Chrome
HejJeg forsøger at få Google Maps overlays til at lade events være I den html jeg bruger I overlays. Eksemplet nedenunder illustrerer det. Jeg adderer en div I mit overlay, og denne div har et tooltip (det er ikke det jeg forsøger at gøre, men det illustrere problemet). Tooltippet kommer frem ved hover I IE, men ikke I Chrome. Det same gælder andre events jeg har attached til den html der er inde I overlayet. Hvordan kan jeg få det til at virke?
Tak :-)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var overlay;
MyOverlay.prototype = new google.maps.OverlayView();
function initialize() {
var mapOptions = {
zoom: 11,
center: new google.maps.LatLng(62.323907, -150.109291),
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var swBound = new google.maps.LatLng(62.281819, -150.287132);
var neBound = new google.maps.LatLng(62.400471, -150.005608);
var bounds = new google.maps.LatLngBounds(swBound, neBound);
overlay = new MyOverlay(bounds, map);
}
function MyOverlay(bounds, map) {
this.bounds_ = bounds;
this.map_ = map;
this.div_ = null;
this.setMap(map);
}
MyOverlay.prototype.onAdd = function() {
var div = document.createElement('div');
div.style.borderStyle = 'none';
div.style.borderWidth = '0px';
div.style.position = 'absolute';
div.innerHTML = "<div title='Hvor er mit tooltip' style='background-color:#FFFFFF'>wfefewfw</div>";
this.div_ = div;
var panes = this.getPanes();
panes.overlayLayer.appendChild(div);
};
MyOverlay.prototype.draw = function() {
var overlayProjection = this.getProjection();
var sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
var div = this.div_;
div.style.left = sw.x + 'px';
div.style.top = ne.y + 'px';
div.style.width = (ne.x - sw.x) + 'px';
div.style.height = (sw.y - ne.y) + 'px';
};
MyOverlay.prototype.onRemove = function() {
this.div_.parentNode.removeChild(this.div_);
this.div_ = null;
};
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
