Externe link verandert icon google maps
ik ben probeer ervoor te zorgen dat als met met de muis over een link buiten de google maps zelf op de site gaat, de marker in google maps verandert van icon.
De code voor de google maps die ik in heb heb gebruikt is min of meer gekopieerd van de documentatie voor markers uit een database halen
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
83
84
85
86
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
83
84
85
86
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<style>
body {margin: 0;}
.scrollfix {line-height: 1.35; overflow: hidden; white-space: nowrap;}
</style>
<title>Vaktherapeuten 030 - Map</title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script type="text/javascript">
//<![CDATA[
var customIcons = {
vaktherapeut: {
icon: 'pin.png'
}
};
var marker, i
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(52.076745, 5.093498),
zoom: 10,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("getxml.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var adres = markers[i].getAttribute("adres");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<div class=\"scrollfix\"><b>" + name + "</b> <br/>" + adres + "</div>";
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
});
google.maps.event.addListener(marker, 'mouseover', function() {
this.setIcon('pin2.png');
});
google.maps.event.addListener(marker, 'mouseout', function() {
this.setIcon('pin.png');
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
//]]>
</script>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<style>
body {margin: 0;}
.scrollfix {line-height: 1.35; overflow: hidden; white-space: nowrap;}
</style>
<title>Vaktherapeuten 030 - Map</title>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script type="text/javascript">
//<![CDATA[
var customIcons = {
vaktherapeut: {
icon: 'pin.png'
}
};
var marker, i
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(52.076745, 5.093498),
zoom: 10,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("getxml.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var adres = markers[i].getAttribute("adres");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<div class=\"scrollfix\"><b>" + name + "</b> <br/>" + adres + "</div>";
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
});
google.maps.event.addListener(marker, 'mouseover', function() {
this.setIcon('pin2.png');
});
google.maps.event.addListener(marker, 'mouseout', function() {
this.setIcon('pin.png');
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
//]]>
</script>
Ik moet dus op de een of andere manier de link gekoppeld krijgen aan de marker, maar dit wilt niet echt lukken (ben niet echt een expert wat betreft javascript)
heeft iemand een idee hoe ik dit moet oplossen. Het moet er dus ongeveer zo uitzien al bij dit voorbeeld
http://econym.org.uk/gmap/example_hoverchange75.htm
Gewijzigd op 04/11/2014 18:04:28 door Marijn Struijlaart
Er zijn nog geen reacties op dit bericht.