Het lukt mij maar niet om dit script werkende te krijgen, ik hoop dat iemand mij kan helpen.
De bedoeling is als je met de muisaanwijzer over de div pak beweegt, dan zou het ballonnetje moeten bewegen(bounce)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple markers</title>
<style>
html, body, #map-canvas {
height: 600px;
width: 500px;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var LocationData = [
[51.5462193, 4.7957545, "dit is een test" ],
[51.5875152, 4.7799458, "dit is test 2" ]
];
function initialize()
{
var map = new google.maps.Map(document.getElementById('map-canvas'));
var bounds = new google.maps.LatLngBounds();
var infowindow = new google.maps.InfoWindow();
for (var i in LocationData)
{
var p = LocationData[i];
var latlng = new google.maps.LatLng(p[0], p[1]);
bounds.extend(latlng);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: p[2],
//animation: google.maps.Animation.BOUNCE
//animation: google.maps.Animation.DROP
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(this.title);
infowindow.open(map, this);
});
}
map.fitBounds(bounds);
//nieuwe code weg halen als het mis gaat
$('.pak').hover(function() {
var lng = $(this).attr('longitude');
var lat = $(this).attr('latitude');
$(this).mouseenter(function() {
this.marker.setAnimation(google.maps.Animation.BOUNCE);
});
$(this).mouseleave(function() {
this.marker.setAnimation(null);
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
<div class="pak" longitude="4.7957545" latitude="51.5462193" >
Test test test
</div>
</body>
</html>
