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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
|
var map = null;
var newMarkers = [], marker;
var html = [];
//////// Affichage de la carte ////////////////
function initialize() {
var markers ="";
var mapOptions = {
zoom: 6,
minZoom: 3,
center : new google.maps.LatLng(52.25, 10.48),
mapTypeId: google.maps.MapTypeId.ROADMAP, //On indique qu'il s'agit d'une "carte routière"
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.RIGHT_BOTTOM
},
panControl: false,
mapTypeControl: false,
streetViewControl: false,
}; // var mapOptions
map = new google.maps.Map(document.getElementById("map"), mapOptions);
downloadUrl("donnees_xml.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var id = markers[i].getAttribute("id");
var pseudo = markers[i].getAttribute("pseudo");
var nom = markers[i].getAttribute("nom");
var avatar = markers[i].getAttribute("avatar");
var ville = markers[i].getAttribute("ville");
var zipcode = markers[i].getAttribute("zipcode");
var pays = markers[i].getAttribute("pays");
var groupe = markers[i].getAttribute("groupe");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
// Contenu des différentes infobox
var html_groupe1 = 'contenu 1';
var html_groupe2 = ' contenu 2';
// insertion des contenue infobox dans un tableau associatif
var html = [ html_membre, html_shop];
html['groupe1'] = html_groupe1;
html['grouped'] = html_groupe2;
// icones marker perso
var icon = customIcons[groupe] || {};
// définition des markers
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
}); // var marker
marker.mycategory = groupe;
marker.myname = name;
newMarkers.push(marker);
// définition et style des infobox
boxText = document.createElement("div"),
boxText.style.cssText = "border: 0px ridge black; margin-top: 8px; background: rgba(0,0,0,0.7); box-shadow: inset 0 40px 20px -20px rgba(255,255,255,0.2);color:#FFF; font-family:Arial; font-size:12px; padding: 5px; border-radius:6px; -webkit-border-radius:6px; -moz-border-radius:6px;";
boxText.innerHTML = html[groupe];
infoboxOptions = {
content: boxText,
disableAutoPan: false,
maxWidth: 0,
pixelOffset: new google.maps.Size(-140, 0),
zIndex: null,
boxStyle: {
background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat",
opacity: 1,
width: "280px"
},
closeBoxMargin: "12px 4px 2px 2px",
closeBoxURL: "http://localhost:8888/mobile/images/close.png",
infoBoxClearance: new google.maps.Size(1, 1),
isHidden: false,
pane: "floatPane",
enableEventPropagation: false
};
newMarkers[i].infobox = new InfoBox(infoboxOptions);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
newMarkers[i].infobox.open(map, this);
map.panTo(markerData[i].point);
} // return
})(marker, i)); // addlistener
}// for
}); // downloadUrl
return newMarkers;
} // initialize |
