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
| <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas {
height : 100%
}
#side_bar {
text-align : center;
}
#side_bar button {
font-size : 16px;
font-family : Verdana, Arial;
width : 150px;
height : 40px;
padding : 5px;
margin : 5px;
border : 1px solid #c0c0c0;
background-color : #f0f0f0;
cursor : pointer;
}
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
// Variable globale
var gmarkers = [];
function initialize() {
// *** *** Creation de la carte *** ***
// *** Centrage sur le centre de la France ***
// METTRE le mot cle var et un point virgule en fin d'instruction
var latlng_c=[45.462367,4.389975]; //"Stade Geoffroy-Guichard, France"
var latlng = new google.maps.LatLng(latlng_c[0],latlng_c[1]);
var myOptions = {
zoom: 5,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
// VARIABLE QUI NE SERVENT PAS ou PLUS
// OUT var nom;
// OUT var site;
// OUT var address;
// OUT var latlng; // variable deja definie
// OUT side_bar_html = "";
// VARIABLE sans var est consideree comme GLOBALE, A METTRE HORS FUNCTION AVEC MOT CLE var
// OUT gmarkers = [];
// *** Ajout des marqueur ***
var tMarker = [
{
nom:"Le louvre",
phone:"01..",
address:"Paris",
latlng:[48.861101, 2.335324] // ne pas mettre de virgule apres le dernier IE don't like
},
{
nom:"La Part Dieu",
phone:"04..",
address:"Lyon",
latlng:[45.760892, 4.859519] // ne pas mettre de virgule apres le dernier IE don't like
}
// METTRE un point virgule en fin d'instruction
];
// METTRE le mot cle var
for( var m in tMarker){
mark_Address(map,tMarker[m].nom,tMarker[m].phone,tMarker[m].address,tMarker[m].latlng);
//alert(tMarker[m].address)
}
// OUT document.getElementById("side_bar").innerHTML = side_bar_html;
} // fin de la fonction initialize()
// ****** Fonction marquage ******
function mark_Address(map,nom,phone,address,latlng_c) {
var oSide = document.getElementById("side_bar");
var latlng = new google.maps.LatLng(latlng_c[0],latlng_c[1]);
var myWindowOptions = {
content:
'<p align="center"><font size="4">'+nom+'<br>'+phone+'<br>'+address+'<br></font></p>'
};
var myInfoWindow = new google.maps.InfoWindow(myWindowOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: nom
});
// Affichage de la fenetre au click sur le marker
google.maps.event.addListener(marker, 'click', function() {
myInfoWindow.open( map, marker);
});
gmarkers.push(marker);
// creation du bouton vers marqueur
var oBtn = document.createElement('BUTTON');
var oBr = document.createElement( 'BR');
var oTxt = document.createTextNode( nom);
// function sur click
oBtn.onclick = function(){
google.maps.event.trigger( marker, "click");
};
// titre pour survol
oBtn.title = " Afficher \n"+ nom +"\t";
// ajout des elements
oBtn.appendChild ( oTxt);
oSide.appendChild ( oBtn);
oSide.appendChild ( oBr);
// OUT side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + nom + '<\/a><br>';
}
/*-- PLUS NECESSAIRE
// Récupération du click correspondant et ouverture de la fenêtre associée
function myclick(i) {
google.maps.event.trigger(gmarkers[i], "click");
}
--*/
</script>
</head>
<body onload="initialize()">
<table border=1>
<tr>
<td width = 250 valign="top" s_tyle="text-decoration: underline; color: #4444ff;">
<div id="side_bar"></div>
</td>
<td>
<div id="map_canvas" style="width: 1000px; height: 700px"></div>
</td>
</tr>
</table>
</body>
</html> |
