Activité 1 : Réalisation d’une page Web personnalisée

Vous devez réaliser une page web rigoureusement identique à la page représentée ci-dessous à propos d’un lieu de votre choix en respectant le cahier des charges suivant :

On fera un fichier html, un fichier js et un fichier css.

N.B : Placer l’appel au fichier js <script type="text/javascript" src="fichier.js"></script>, soit à la fin de la page html pour s’assurer que la structure du document ou DOM a bien été chargée avant l’ouverture de la page, soit l’insérer dans le head et alors dans le fichier js placer votre script dans le callback de la fonction load : window.onload = function() { votre script à insérer }.

Il faut utiliser Google Maps, puis faire un clic droit sur un lieu  "Plus d’infos sur cet endroit" pour obtenir sa latitude et sa longitude.

image

Voici le code html pour le dessin d’une Google map à partir des coordonnées de latitude et de longitude d'un lieu permettant de modifier la largeur et la hauteur de la carte ainsi que le niveau de zoom


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Map</title>

</head>

<body>

<img id="plan">

<script type="text/javascript">

var width=420;

var height=320;

var zoom=8;

var latitude=31.626229;

var longitude=-7.988969;

var url="http://maps.googleapis.com/maps/api/staticmap?"+"zoom="+zoom+"&size="+width+"x"+height+"&" +"markers=color:blue%7Clabel:S%7C"+latitude+","+longitude+"&sensor=true";

var plan=document.getElementById('plan');

plan.src=url;

</script>

</body>

</html>