Zerberus777
Mitglied
Hallo,
ich habe mal wieder eine Stelle, an der ich nicht weiterkomme. Ich möchte bei Aktivierung der Marker ein InfoWindow ausgeben. Allerdings erscheint nur ein leeres InfoWindow.
Es liegt nicht an "weißer Schrift auf weißem Grund", der entsprechende contentString ist auch gefüllt (siehe Consolen-Ausgabe). Anscheinend wird der contentString nicht übergeben.
Wer kennt die Lösung?
Gruß
Zerberus
ich habe mal wieder eine Stelle, an der ich nicht weiterkomme. Ich möchte bei Aktivierung der Marker ein InfoWindow ausgeben. Allerdings erscheint nur ein leeres InfoWindow.
Es liegt nicht an "weißer Schrift auf weißem Grund", der entsprechende contentString ist auch gefüllt (siehe Consolen-Ausgabe). Anscheinend wird der contentString nicht übergeben.
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Marker Animations</title>
<style>
html, body {
height: 100%;
margin: 0px;
padding: 0px;
}
#map-canvas {width:400px; height:600px}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script>
var berlin = new google.maps.LatLng(52.520831, 13.409387);
var posberlin1 = new google.maps.LatLng(52.52, 13.37);
var posberlin2 = new google.maps.LatLng(52.52, 13.41);
var posberlin3 = new google.maps.LatLng(52.52, 13.45);
var markberlin1, markberlin2, markberlin3;
var map;
var xxx;
var infowindow = new google.maps.InfoWindow({content: contentString});
var contentString = "++++TEST++++";
function initialize() {
var mapOptions = {
zoom: 12,
center: berlin,
mapTypeId: google.maps.MapTypeId.HYBRID
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
markberlin1 = new google.maps.Marker({
map:map,
draggable:true,
animation: google.maps.Animation.DROP,
position: posberlin1
});
markberlin2 = new google.maps.Marker({
map:map,
draggable:true,
animation: google.maps.Animation.DROP,
position: posberlin2
});
markberlin3 = new google.maps.Marker({
map:map,
draggable:true,
animation: google.maps.Animation.DROP,
position: posberlin3
});
google.maps.event.addListener(markberlin1, 'mouseover', function() {toggleBounce("berlin1",markberlin1)});
google.maps.event.addListener(markberlin1, 'mouseout', function() {toggleBounce("berlin1",markberlin1)});
google.maps.event.addListener(markberlin2, 'mouseover', function() {toggleBounce("berlin2",markberlin2)});
google.maps.event.addListener(markberlin2, 'mouseout', function() {toggleBounce("berlin2",markberlin2)});
google.maps.event.addListener(markberlin3, 'mouseover', function() {toggleBounce("berlin3",markberlin3)});
google.maps.event.addListener(markberlin3, 'mouseout', function() {toggleBounce("berlin3",markberlin3)});
}
function toggleBounce(selectDiv, selectMarker) {
if (selectMarker.getAnimation() != null) {
infowindow.close(map, selectMarker);
selectMarker.setAnimation(null);
document.getElementById(selectDiv).style.background="green";
} else {
selectMarker.setAnimation(google.maps.Animation.BOUNCE);
console.log (contentString);
infowindow.open(map, selectMarker);
document.getElementById(selectDiv).style.background="red";
}
}
function toggleColor(selectDiv) {
sty = document.getElementById(selectDiv).style;
if (sty.backgroundColor == "green" || sty.backgroundColor == "") {
sty.backgroundColor = "red";
} else {
sty.backgroundColor = "green";
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas" style="display:inline-block"></div>
<div id="berlin1" onmouseover="toggleColor('berlin1');toggleBounce('berlin1',markberlin1)" onmouseout="toggleColor('berlin1');toggleBounce('berlin1',markberlin1)" style="width:300px; height:300px; background-color: green; display:inline-block"></div>
<div id="berlin2" onmouseover="toggleColor('berlin2');toggleBounce('berlin2',markberlin2)" onmouseout="toggleColor('berlin2');toggleBounce('berlin2',markberlin2)" style="width:300px; height:300px; background-color: green; display:inline-block"></div>
<div id="berlin3" onmouseover="toggleColor('berlin3');toggleBounce('berlin3',markberlin3)" onmouseout="toggleColor('berlin3');toggleBounce('berlin3',markberlin3)" style="width:300px; height:300px; background-color: green; display:inline-block"></div>
</body>
</html>Wer kennt die Lösung?
Gruß
Zerberus
