google marker bounce
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)
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<!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>
<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>
Gewijzigd op 21/08/2014 18:53:28 door Lano Heeren
Bij mij weergeeft hij het volgende:
Quote:
ReferenceError: $ is not defined esgfd.html:54
Op regel 54 gaat het fout om dat je geen variable hebt gedefinieerd.
Kijk hier eens naar.
Gewijzigd op 21/08/2014 19:18:25 door Bas IJzelendoorn
Het voorbeeldje ziet er goed uit, maar het ballonnetje zou eigenlijk moeten bewegen als je met de muis over de <div class="pak">test</div> gaat.
<div class="pak" longitude="4.7957545" latitude="51.5462193" >
Test test test
</div>