// On initialise la latitude et la longitude de Paris (centre de la carte)
var lat = {{lat}};
var lon = {{lon}};
var map = null;
var marker;
// Fonction d'initialisation de la carte
function initMap() {
  // Créer l'objet "map" et l'insèrer dans l'élément HTML qui a l'ID "map"
  map = new google.maps.Map(document.getElementById("map"), {
      // Nous mettons la carte au centre avec les coordonnées
      center: new google.maps.LatLng(lat, lon),
      // Nous définissons le zoom par défaut (réglable in HTML)
      zoom: 16,
      // Nous activons en mode carte routière
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      // Nous activons les options de contrôle de la carte
      mapTypeControl: true,
      // Nous désactivons la roulette de souris
      scrollwheel: false,
      // Nous désactivons le déplacement sur la carte
      draggable: false,
      mapTypeControlOptions: {
          // Cette option sert à définir comment les options se placent
          style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
      },
      // Activation des options de navigation dans la carte (zoom...)
      navigationControl: true,
      navigationControlOptions: {
          // Comment ces options doivent-elles s'afficher
          style: google.maps.NavigationControlStyle.ZOOM_PAN
      }
  });
  marker = new google.maps.Marker({
    map: map,
    // Nous animons le marqueur en DROP
    animation: google.maps.Animation.DROP,
    // Nous définissons la position
    position: {lat: {{lat}}, lng: {{lon}}}
  });
}
window.onload = function(){
  // Fonction d'initialisation qui s'exécute lorsque le DOM est chargé
  initMap();
};