TD3/map.html at master · takla21/TD3 · GitHub

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
<!DOCTYPE html>
<html>
	<head>
		<title>La Carte du Québec </title>
		<meta charset="utf8">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

		<!-- Ceci permet d'inclure les fichiers CSS -->
		<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
		<link href="styles.css" rel="stylesheet" type="text/css">

		<!-- Ceci permet d'inclure les fichiers JavaScript de jQuery, jQuery UI, Google Maps ainsi que map.js -->
		<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
		<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
		<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCjonwWBWoE1W6L8sU7KPl7zkRLSaPNC2o&amp;sensor=false"></script>

		<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="map.js"></script>
		<script type="text/javascript" src="villes.json"></script>
	</head>
	<body>
		<div class="maClasse"> <!-- la partie affichage -->
			<h1>La Carte du Québec</h1> <!-- Titre de l'application -->
			<p>Entrez une ville pour la retrouver sur la carte Google Maps!</p> <!-- Instruction -->
			<div> <!-- balise contenant les boutons francais et anglais ainsi que le champ de texte-->
				<div class = "row">
					<div class="col-sm-4" id="ville">	<!-- balise le champ de texte-->
						<input type="text" name="ville" id="txtarea" value="Montreal"></br>
					</div>
					<div class="col-sm-8">	 <!-- balise contenant les boutons francais et anglais-->
						<div class="col-sm-6" id="ville">
							<button class="btn btn-info" id="btnfrancais">Francais</button>
						</div>
						<div class="col-sm-6" id="ville">
							<button class="btn btn-info" id="btnanglais">Anglais</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="map"> <!-- balise qui contiendra la carte de Google-->
		</div>
	</body>
</html>