Le blog de Philippe Poisse

Les ingrédients

Pour réaliser votre carte il vous faut deux choses :

• Les coordonnées de la commune en question ;
• Le tracé des limites administratives.

Pour les coordonnées de la commune un passage par Wikipedia peut suffire. De toutes façons ces coordonnées ne servent que pour centrer la carte, la précision est donc un peu secondaire.

Pour les limites administratives, vous pouvez voir (sommairement) comment les récupérer avec ce lien.

À toutes fins utiles, voici deux autres liens pour les conversions de coordonnées :

• Une macro pour OpenOffice/LibreOffice.
• Un convertisseur en ligne.

Géométrie

Grosso modo dans Google Maps les formes géométriques sont constituées de points reliés par des lignes droites. Cela signifie que pour gérer les limites d’une commune il suffit de disposer d’une liste de points.

Par contre, comment appelle-t-on une forme géométrique composée d’une succession de lignes droites ?

Un polygone !

Tout le boulot va donc consister à déclarer un polygone dans la fonction JavaScript gérant la carte

Code

Le début du code est assez classique, on crée la carte et on la centre sur la ville.

 // Création de l'objet contenant les propriétés de la carte.
var options = {
    zoom: 15,
    center: new google.maps.LatLng(42.548901, 3.021505),
    mapTypeId: google.maps.MapTypeId.SATELLITE,
    navigationControl: true,
    navigationControlOptions: {
        style: google.maps.NavigationControlStyle.ZOOM_PAN
    },
    scaleControl: true,
    streetViewControl: true
};
// Création de la carte.
var map = new google.maps.Map(document.getElementById('map'), options);

Ensuite il faut créer une variable qui contient un tableau de tous les points du contour.

var contour_points = [
    new google.maps.LatLng(42.53069045703184, 2.9702953871217264),
    new google.maps.LatLng(42.530881835828325, 2.970354316604365),
];

Pour finir on va déclarer le polygone en lui passant quelques paramètres :

• strokeColor pour la couleur du contour ;
• strokeOpacity pour l’opacité du contour ;
• strokeWeight pour l’épaisseur du contour ;
• fillColor pour la couleur de remplissage ;
• fillOpacity pour l’opacité du remplissage.

var contour = new google.maps.Polygon({
    paths: contour_points,
    map: map,
    strokeColor: '#FF0000',
    strokeOpacity: 1,
    strokeWeight: 1,
    fillColor: '#000000',
    fillOpacity: 0,
});

Vous pouvez voir un exemple sur cette page.

Et le code source de l’exemple ici (fichier en utf-8).