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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<HEAD>
<style type="text/css">
div.conteneur-parent {
height: 800px;
}
#map-canvas {
height : 730px;
width : 1000px;
width : 100%;
margin: 0 auto;
margin-right: auto;
border : 1px solid #888;
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&language=fr&v=3">
</script>
<script type="text/javascript">
var map;
var contentString = '<div id="content" style="width:450px;height:300px;"></div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
// initialisation de la carte Google Map de départ
function initialiserCarte()
{
// Latitude et longitude du centre de Paris pour centrer la carte de départ
var latlng = new google.maps.LatLng(48.8590519, 2.33254949999998);
var mapOptions = {
zoom : 13,
center : latlng,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
// map-canvas est le conteneur HTML de la carte Google Map
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
TrouverAdresse();
}
function TrouverAdresse()
{
var nbadresses = document.getElementById('nbadresses').value;
// Lecture du tableau des adresses
for (var i = 1; i <= nbadresses; i++)
{
var nom = document.getElementById('nom' + i).value;
var adresse = document.getElementById('adresse' + i).value;
var latitude = document.getElementById('latitude' + i).value;
var longitude = document.getElementById('longitude' + i).value;
latitude = parseFloat(latitude);
longitude = parseFloat(longitude);
imgMarker = 'images/green-dot.png';
var marker = new google.maps.Marker({
position: new google.maps.LatLng(latitude, longitude),
map: map,
icon: imgMarker,
height: 25,
width: 25,
indice: i,
title: nom + '\n' + adresse.replace('<br>', ' ')
});
setEventMarker(marker);
}
}
function setEventMarker(marker){
google.maps.event.addListener(marker, 'click', function() {
// affichage InfoWindow
infowindow.open( this.getMap(), this);
var pano = null;
google.maps.event.addListener(infowindow, 'domready', function() {
if (pano != null) {
pano.unbind("position");
pano.setVisible(false);
}
pano = new google.maps.StreetViewPanorama(document.getElementById("content"), {
navigationControl: true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
enableCloseButton: false,
addressControl: true,
linksControl: true,
pov: {
heading: 0,
pitch: 0,
zoom: 1
}
});
pano.bindTo("position", marker);
pano.setVisible(true);
});
google.maps.event.addListener(infowindow, 'closeclick', function() {
pano.unbind("position");
pano.setVisible(false);
pano = null;
});
});
}
// Lancement de la construction de la carte google map
google.maps.event.addDomListener(window, 'load', initialiserCarte);
</script>
<title>
</title>
</HEAD>
<body bgcolor="#ECF4FF">
<form name="frmMap" method="post">
<div class="conteneur-parent">
<div id="map-canvas" class="map-canvas"></div>
</div>
<input type="hidden" id="adresse1" value="10 rue Ordener<br>75018 PARIS">
<input type="hidden" id="nom1" value="PARIS NORD">
<input type="hidden" id="latitude1" value="48.8903814">
<input type="hidden" id="longitude1" value="2.358542">
<input type="hidden" id="adresse2" value="135 rue d'Alésia<br>75014 PARIS">
<input type="hidden" id="nom2" value="PARIS SUD">
<input type="hidden" id="latitude2" value="48.8292347">
<input type="hidden" id="longitude2" value="2.3216871">
<input type="hidden" id="adresse3" value="28 rue de Passy<br>75016 PARIS">
<input type="hidden" id="nom3" value="PARIS OUEST">
<input type="hidden" id="latitude3" value="48.8581806">
<input type="hidden" id="longitude3" value="2.2813245">
<input type="hidden" id="adresse4" value="2 rue Belgrand<br>75020 PARIS">
<input type="hidden" id="nom4" value="PARIS EST">
<input type="hidden" id="latitude4" value="48.8649356">
<input type="hidden" id="longitude4" value="2.3986363">
<input type="hidden" name="nbadresses" id="nbadresses" value="4">
</form>
</BODY>
</HTML> |
