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
| <!DOCTYPE html>
<html lang="fr">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[GoogleMaps API V3] Insertion d'une Carte</title>
<style type="text/css">
#div_carte {
height : 600px; /* IMPERATIF */
width : 600px;
margin : auto;
border : 1px solid #888;
}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initCarte(){
var tMarker = [
{ 'lat' :48.856667, 'lon' : 2.350987, 'title' :'Paris', 'info' :'<b>Paris<\/b><br>comment insérer une image...'},
{ 'lat' :44.837368, 'lon' :-0.576144, 'title' :'Bordeaux', 'info' :'<b>Bordeaux<\/b><br>comment insérer une image...'},
{ 'lat' :43.297612, 'lon' : 5.381042, 'title' :'Marseille', 'info' :'<b>Marseille<\/b><br>comment insérer une image...'}
];
var oMap, oMarker, oInfo;
var i, nb = tMarker.length;
// création de la carte
oMap = new google.maps.Map(document.getElementById("div_carte"),{
'zoom' : 6,
'panControl' : false,
'streetViewControl' : false,
'zoomControl' : false, // supprime l'icône de contrôle du zoom
'scrollwheel' : false, // désactive le zoom avec la molette de la souris
'disableDoubleClickZoom' : true, // désactive le zoom sur le double-clic
'center' : new google.maps.LatLng( 46.80, 1.75),
'mapTypeId' : google.maps.MapTypeId.ROADMAP
});
// création infobulle
oInfo = new google.maps.InfoWindow();
// création des markers
for( i = 0; i < nb; i++){
// création marker
oMarker = new google.maps.Marker({
'numero' : i, // ici on sauve la valeur de i
'position' : new google.maps.LatLng( tMarker[i].lat, tMarker[i].lon),
'map' : oMap,
'title' : tMarker[i].title,
// Markers drop on the map
'animation': google.maps.Animation.DROP
});
// événement clic sur le marker
google.maps.event.addListener( oMarker, 'click', function() {
// affectation du contenu en utilisant this.numero
oInfo.setContent( tMarker[this.numero].info);
// affichage InfoWindow
oInfo.open( this.getMap(), this);
});
}
}
// init lorsque la page est chargée
google.maps.event.addDomListener(window, 'load', initCarte);
</script>
</head>
<body>
<div id="div_carte"></div>
</body>
</html> |
