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
|
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
function initCarte(){
var i, nb = data.length;
var oMarker, oPolyline, oPath =[];
var oMap = new google.maps.Map(document.getElementById('div_carte'),{
'center': new google.maps.LatLng(47,2),
'zoom': 7,
'backgroundColor': '#fff',
'streetViewControl': false,
'zoomControlOptions': {
'style': google.maps.ZoomControlStyle.SMALL
},
'mapTypeId': google.maps.MapTypeId.HYBRID,
});
// on boucle sur les données
for( i=0; i < nb; i++){
// création du marker, optionnel
oMarker = new google.maps.Marker({
'map' : oMap,
// icone personalisée
'icon':{
'path': google.maps.SymbolPath.CIRCLE,
'fillColor': 'white',
'fillOpacity': 0.5,
'scale': 6,
'strokeColor': 'red',
'strokeWeight':1
},
'position': new google.maps.LatLng( data[i][0], data[i][1])
});
// stocke les donnees au format new google.maps.LatLng
oPath.push( new google.maps.LatLng( data[i][0], data[i][1]));
}
// creation de la polyline trajet
oPolyline = new google.maps.Polyline({
'path' : oPath,
'map': oMap,
'strokeColor': "#FF0000",
'strokeOpacity': 0.6,
'strokeWeight': 3
});
///////////////////////////////////////////////////////// ici la partie icône cliquables //////////////////////////////// ne fonctionne pas
var locations = [
[' src = " <iframe width = " 400 " height = " 300 " src = " https://xxxxxxxxx/6047086 " frameborder = " 0 " allowfullscreen></iframe > " ', 47.311, 1.7637, 0],
[' src = " <iframe width = " 400 " height = " 300 " src = " https://xxxxxxxxx/5896458 " frameborder = " 0 " allowfullscreen></iframe > " ', 47.792, 1.0653, 0],
[' src = " <iframe width = " 400 " height = " 300 " src = " https://xxxxxxxxx/5797434 " frameborder = " 0 " allowfullscreen></iframe > " ', 48.006, 0.1995, 0],
];
var infowindow = new google.maps.InfoWindow();
var monIconPerso = new google.maps.MarkerImage("icones/bleue.png"),i;
for (i = 0; i < locations.length; i++) { marker = new google.maps.Marker({
icon : monIconPerso,
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(div_carte, marker);
}
})(marker, i));
}
}
// init lorsque la page est chargée
google.maps.event.addDomListener(window, 'load', initCarte);
</script>
</head>
<body>
<div id="div_carte"></div> |
Partager