<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <title>La chasse aux musées</title>
    </head>
    <body>
        <div id="description">
            <h1>La chasse aux musées</h1>
            <span>avec</span>
            <h3>Google Maps JavaScript API</h3>
            <p>Le but de cette page est de recenser les différents musées Parisiens !</p>
        </div>
    </body>
</html>

<style type="text/css">
        html, body, #map-canvas {
            height: 100%;
            margin: 0;
            padding: 0;
            font-family: cursive;
        }
        #description {
            text-align: center;
            position: absolute;
            font-size: 13px;
            z-index: 9;
            right: 20px;
            top: 20px;
            background-color: rgba(166, 166, 166, 0.88);
            border-radius: 20px;
            color: rgb(58, 57, 61);
        }
    </style>

<script type="text/javascript">
	/* Déclaration de la Map */
	var map;
	/* Déclaration des options et initialisation de la carte */
	function initialize() {
		var mapOptions =
		{
		zoom: 13,
		center: new google.maps.LatLng(48.859952,2.335068)
            };

<script type="text/javascript">
/* Récupération du Json, lecture du Json, vérification de la présence de coordonnées et ajout de markers */
    $.getJSON('markers.json', function (data) {
        for (var i in data) {
            if (data[i].fields.hasOwnProperty("coordonnees_")) {

var myLatLng = new google.maps.LatLng(
	data[i].fields.coordonnees_[0], 				 		data[i].fields.coordonnees_[1]);  /*creation de la position*/
var marker = new google.maps.Marker({
                    position: myLatLng,
                    map: map,
                    icon: 'museum_32.png'
                }); /*création du marqueur*/
            }  /* vérification de la présence de coordonnées */
        }   /* boucle sur les coordonnées des marqueurs */
    }); /* lecture du fichier Json */
    /* listner de la fonction load pour lancer l'initialisa-tion de la Map */
    google.maps.event.addDomListener(window, 'load', initial-ize);
</script>