Tracer une zone circulaire sur une carte Google

Le restaurant qui prépare votre poutine préférée offre la livraison dans un rayon restreint de 3 kilomètres ? Vous voulez illustrer graphiquement la zone sur une carte Google ? Voici comment faire.

Tout d'abord, si c'est votre première expérience avec Google Maps, référez-vous à mon billet qui explique comment intégrer une carte Google à son site (en obtenant une clé d'API gratuite).

Incluez un conteneur HTML pour la carte en indiquant un ID unique qui pourra être utilisé dans la programmation JavaScript :

<div id="map" style="width:800px;height:600px"></div>

Ensuite, déclarez la carte, les coordonnées du point central du cercle et indiquez le rayon. À l'aide de votre ami jQuery, appelez la fonction principale au chargement de la page (sinon, faites-le dans l'événement onLoad de la balise body).

Le code JavaScript :

var map;
var center = new GLatLng(45.563234,-73.65614);
var radius = 3; // km

$(document).ready(loadMap);

function loadMap() {
   if (GBrowserIsCompatible()) {
       map = new GMap2(document.getElementById("map"));
       map.enableScrollWheelZoom();
       map.setCenter(center, 13); // 13 = niveau de zoom

       var centerMarker = new GMarker(map.getCenter());
       map.addOverlay(centerMarker);

       var points = new Array();

       // rayon de la Terre = 6378.8 km
       var d = radius/6378.8;

       // radians
       var lat1 = (Math.PI/180)* center.lat();
       var lng1 = (Math.PI/180)* center.lng();

       var bounds = new GLatLngBounds();

       // calculer les 360 points du cercle
       for(var i=0 ; i<=360 ; i++ ){
           var tc = (Math.PI/180)*i;
           var y = Math.asin(Math.sin(lat1)*Math.cos(d)+Math.cos(lat1)*Math.sin(d)*Math.cos(tc));
           var dlng = Math.atan2(Math.sin(tc)*Math.sin(d)*Math.cos(lat1),Math.cos(d)-Math.sin(lat1)*Math.sin(y));
           var x = ((lng1-dlng+Math.PI) % (2*Math.PI)) - Math.PI ;
           var point = new GLatLng(parseFloat(y*(180/Math.PI)),parseFloat(x*(180/Math.PI)));
    
           points.push(point);
           bounds.extend(point);
       }

       if (d < 1.5678565720686044) {
           circle = new GPolygon(points, '#ACACAC', 2, 1, '#ACACAC', 0.25);
       }
       else {
           circle = new GPolygon(points, '#ACACAC', 2, 1);
       }

       map.addOverlay(circle);
       map.setZoom(map.getBoundsZoomLevel(bounds));
   }
}

La seule difficulté réside dans le fait qu'on doit utiliser un polygone et calculer avec une formule mathématique chaque point du cercle (1 par degré). Le résultat obtenu est réussi:



Pour en revenir au restaurant que je mentionnais, je ne connais pas vraiment l'étendue de leur zone de livraison. La plupart du temps, je prends mes commandes en take-out. Avec 10% d'escompte au comptoir, essayez la grosse poutine Mistinguette (frites, viande fumée, sauce à la viande, le tout gratiné). Pendant la préparation, allez faire un tour au dépanneur juste à côté et découvrez leur belle sélection de bières de microbrasseries québécoises. Hum... l'heure du lunch approche...