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 |