rwd
& maps

Un exemple classique : une carte, un marqueur et quelques informations.

Le code ci-dessous charge de manière asynchrone l'API Google Maps.
Le chargement est effectué lors de l'événement window.onload.
La carte est centrée sur la Place du Capitole à Toulouse, un marqueur est ajouté à la même position et quelques informations sont disponibles au click sur ce marqueur.

Un lien «haut de page» est ajouté afin d'éviter d'être «piégé» dans la carte sur petit écran.

var debounce = function (func, wait, immediate) {
  var timeout;
  return function () {
    var context = this, args = arguments,
      later = function () {
        timeout = null;
        if (!immediate) {func.apply(context, args);}
      },
      callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) {func.apply(context, args); }
  };
}

function initialize() {
  var myLatlng = new google.maps.LatLng(43.604441, 1.443463);
  var mapOptions = {
    zoom: 16,
    center: myLatlng
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  /* progressive enhancement :
   * the text is available if javascript is disabled (in HTML #TextContent) 
   * this text is used for the popup (infowindow) 
   * and then removed from the DOM
   */

  var textContent = document.getElementById('TextContent') ;
  var contentString = textContent.innerHTML ;
  textContent.innerHTML = '';
  var infowindow = new google.maps.InfoWindow({
      content: contentString
  });

  /* add a marker */
  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'Place du Capitole, Toulouse'
  });
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
  });

  /* if the user moves the map 
   * and then resize the window (or change orientation)
   * keep the map centered 
   */

  var center, 
    keepCenter = function() {
    center = map.getCenter();
    window.setTimeout(function(){
      google.maps.event.trigger(map, "resize");
      map.setCenter(center);}, 500);
  }  
  google.maps.event.addDomListener(window, "resize", debounce(keepCenter, 500, true));
  
}

/* load Google Maps script with initialize callback */
function loadScript() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&key=[your-key]&' +
      'callback=initialize';
  document.body.appendChild(script);
}

window.onload = loadScript;

Source pour le chargement asynchrone : Google Maps, Asynchronously Loading the API

Démo Place du Capitole : Google Map async

Ce type de carte est souvent placé en bas de page, à la suite d'un formulaire, sur une page «contact»

Ce pattern permet d'éviter le chargement de scripts bloquant le rendu de la page.
L'essentiel est là, le visiteur peut interagir avec la page sans attendre le chargement du script et de la carte.

Un autre pattern qui peut être utilisé dans ce cas est décrit par Brad Frost dans son article Adaptive Maps. La démo propose de placer un lien vers Google Maps dans le HTML et remplacer ce lien par une image statique (sur petits écrans) ou une carte dynamique (iframe).
Du point de vue de la performance, c'est considérer que la taille d'écran est en lien avec la qualité et la vitesse de connexion, ce qui n'est pas le cas.

Cette dernière solution soulève quand même une question : si une image est suffisante pour les petits écrans, ne le serait-elle pas pour un écran plus grand ?
Le seul avantage que procure une carte dynamique (dans ce cas d'utilisation), c'est le zoom et se déplacer sur la carte… si le visiteur intéragit avec la carte c'est certainement qu'il veut se rendre sur le lieu, et une application ou un site dédié lui rendront bien mieux ce service (geolocalisation, itinéraire, transports en commun etc.).

Il convient donc de se poser la question de la pertinence d'une carte dynamique elle-même.

Si une carte dynamique est tout de même souhaitée, les deux solutions peuvent être améliorées :

• attendre que le visiteur est scrollé pour charger la carte (si celle-ci est en bas de page) ;
• tester les performances (navigation timing API par exemple) et ne charger la carte que si les conditions sont favorables ;
• laisser le visiteur choisir : charger la carte au click sur un bouton dédié.

Démo Google Map async

Place du Capitole

---

Partager sur Twitter