Google Maps est l’un des services les plus populaires de Google. Je ne vais pas vous faire un cours dessus, vous l’avez déjà tous utilisé. Depuis Juillet 2012, la version 3 de son API JavaScript est devenue la version officielle. La version 2 est maintenant obsolète. Pour citer quelques nouveautés :

  • Vous n’avez plus besoin de clé pour pouvoir utiliser l’API
  • Elle est plus rapide et moins lourde (code remanié en MVC)
  • Elle est plus optimisée pour les petits écrans…

 

Voici la documentation pour ceux qui le souhaite : Google Maps API Developer

Voici un outil que j’utilise lors de la conception de mes cartes. Il permet de trouver les coordonnées des villes que vous recherchez. Vous en aurez besoin pour définir la longitude et latitude des points pour les représenter sur la carte.

Edit 04/11 : voici un nouveau site qui donne plus d’une centaine de styles différents, prêt à l’utilisation pour vos cartes Google Maps.

 

Je vais tenter de vous familiariser avec cet outil en vous proposant quelques exemples de code afin de personnaliser vos cartes Google Maps. Libre à vous de les adapter par la suite pour en faire ce que vous voulez. Je vais partir sur une carte du Nord de la France que voici (pour des raisons techniques et afin de faciliter le partage, je n’utiliserai ici que des images, un lien vers la démo sera donné à chaque étape) :

google maps par defaut

 

Le code utilisé est le suivant :

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <title>LIJE : Google Maps JavaScript API v3</title>
        <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #map_canvas {
            height: 400px;
            width: 700px;
            margin:50px auto;
        }
        </style>
        <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
        <script>
        function initialize() {
            var mapOptions = {
                zoom: 6,
                center: new google.maps.LatLng(48,2),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
        }
        </script>
    </head>
    <body onload="initialize()">
        <div id="map_canvas"></div>
    </body>
</html>

 

Point technique :

Lorsque la carte est initialisée, je défini plusieurs paramètres :

  • Zoom : permet tout simplement de définir le zoom sur la carte. Il va de 0 à environ 21 en fonction des zones géographiques.
  • Center : il définit le point central de la carte. Pour faire simple, j’ai utilisé les coordonnées 48,2 (Latitude, Longitude) qui correspondent approximativement au centre de la France.
  • mapTypeId : définit le type de la carte, il existe ROADMAP (carte avec les routes), SATELLITE (carte à la Google Earth), HYBRID (photo satellite avec les routes) et TERRAIN (pour afficher le relief, sans routes avec le Zoom à 6).

 

Puis, on initialise a carte quand la page est chargée : body onload=’initialize()’.

 

Ajouter un marqueur sur votre carte Google Maps

Pour cela, nous allons utiliser l’outil que je vous ai donné en début d’article. Pour ma part, chauvin comme je suis, je vais placer un marqueur sur Strasbourg dont les coordonnées GPS sont 48.583148,7.747882. Je vais également utiliser une icône personnalisée :

carte google map marker

 

Code :

function initialize() {
    var mapOptions = {
        zoom: 6,
        center: new google.maps.LatLng(48,2),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

    var image = 'star.png';
    var myLatLng = new google.maps.LatLng(48.583148,7.747882);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        icon: image,
        title: 'Strasbourg'
    });
}

 

Démo : cliquez ici

 

Cacher les contrôles, effet sur de multiples marqueurs et infoboxes

Les points ont été placés sur Paris, Lyon et Strasbourg. J’ai également désactivé les fonctionnalités qui permettent de zoomer sur la carte.

google maps plusieurs markers

 

Code :

var villes = [
    ['Strasbourg', 48.583148,7.747882],
    ['Paris', 48.856614,2.352222],
    ['Lyon', 45.764043,4.835659]
];

function initialize() {
    var mapOptions = {
        zoom: 6,
        center: new google.maps.LatLng(48,2),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true,
        scrollwheel: false
    }
    var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
    setMarkers(map, villes);
}

function setMarkers(map, locations) {
    var image = 'factory.png';
    for (var i = 0; i < locations.length; i++) {
        var villes = locations[i];
        var myLatLng = new google.maps.LatLng(villes[1], villes[2]);
        var infoWindow = new google.maps.InfoWindow();
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            animation: google.maps.Animation.DROP,
            icon: image
        });
        (function(i) {
            google.maps.event.addListener(marker, "click", function() {
                var villes = locations[i];
                infoWindow.close();
                infoWindow.setContent(
                    "<div id='boxcontent' style='font-family:Calibri'><strong style='color:green'>"
                    + villes[0] +
                    "</strong><br /><span style='font-size:12px;color:#333'>Ceci est un test.</span></div>"
                );
                infoWindow.open(map, this);
            });
        })(i);
    }
}

 

Démo : cliquez ici

 

Carte en noir et blanc avec des zones géographiques de couleur

J’ai affiché la population de Paris, Strasbourg et Lyon sous forme de cercle. La taille de la zone en rouge est calculée par rapport au nombre d’habitants municipaux de chaque ville.

google maps gris zone rouge

 

Code :

function initialize() {
    var styles = {
        'monTheme': [
        {
            featureType: 'all',
            stylers: [
                {saturation: -100},
                {gamma: 0.50}
            ]
        }
    ]};

    var citymap = {};
    citymap['strasbourg'] = {
        center: new google.maps.LatLng(48.583148,7.747882),
        population: 271708
    };
    citymap['paris'] = {
        center: new google.maps.LatLng(48.856614,2.352222),
        population: 2234105
    };
    citymap['lyon'] = {
        center: new google.maps.LatLng(45.764043,4.835659),
        population: 479803
    }

    var mapOptions = {
        zoom: 6,
        center: new google.maps.LatLng(48,2),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true,
        draggable: false,
        mapTypeId: 'monTheme'
    }
    var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
    var styledMapType = new google.maps.StyledMapType(styles['monTheme'], {name: 'monTheme'});
    map.mapTypes.set('monTheme', styledMapType);

    for (var city in citymap) {
        var populationOptions = {
            strokeColor: '#FF0000',
            strokeOpacity: 0.8,
            strokeWeight: 2,
            fillColor: '#FF0000',
            fillOpacity: 0.35,
            map: map,
            center: citymap[city].center,
            radius: citymap[city].population / 20
        };
        var cityCircle = new google.maps.Circle(populationOptions);
    }
}

 

Démo : cliquez ici

 

Tracer un itinéraire sur une carte Google Maps

Le script est défini pour afficher l’itinéraire en voiture entre Strasbourg et Nantes. La carte a aussi été modifié de façon à avoir un contraste plus fort.

google maps trajet personnalisé

 

Code :

function initialize() {
    var styles = {
        'monTheme': [
        {
            featureType: 'road',
            elementType: 'geometry',
            stylers: [{'visibility': 'simplified'}]
        }, {
            featureType: 'road.arterial',
            stylers: [
                {hue: 149},
                {saturation: -78},
                {lightness: 0}
            ]
        }, {
            featureType: 'road.highway',
            stylers: [
                {hue: -31},
                {saturation: -40},
                {lightness: 2.8}
            ]
        }, {
            featureType: 'poi',
            elementType: 'label',
            stylers: [{'visibility': 'off'}]
        }, {
            featureType: 'landscape',
            stylers: [
                {hue: 163},
                {saturation: -26},
                {lightness: -1.1}
            ]
        }, {
            featureType: 'transit',
            stylers: [{'visibility': 'off'}]
        }, {
            featureType: 'water',
            stylers: [
                {hue: 3},
                {saturation: -24.24},
                {lightness: -38.57}
            ]
        }
    ]};

    var mapOptions = {
        zoom: 6,
        center: new google.maps.LatLng(48,2),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true,
        mapTypeId: 'monTheme'
    }
    var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
    var styledMapType = new google.maps.StyledMapType(styles['monTheme'], {name: 'monTheme'});
    map.mapTypes.set('monTheme', styledMapType);

    var myLatLng = new google.maps.LatLng(48.583148,7.747882);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        icon: 'star.png',
        title: 'Strasbourg'
    });

    var myLatLng2 = new google.maps.LatLng(47.218371,-1.553621);
    var marker2 = new google.maps.Marker({
        position: myLatLng2,
        map: map,
        icon: 'flag.png',
        title: 'Nantes'
    });

    var directionsService = new google.maps.DirectionsService();
    var directionsDisplay = new google.maps.DirectionsRenderer({ 'map': map });
    var request = {
        origin : myLatLng,
        destination: myLatLng2,
        travelMode : google.maps.DirectionsTravelMode.DRIVING,
        unitSystem: google.maps.DirectionsUnitSystem.METRIC
    };
    directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
            directionsDisplay.setOptions({'suppressMarkers':true});
        }
    });
}

 

Démo : cliquez ici

 

Carte Google Maps de nuit avec une zone colorée

Tous avec notre outil magique, si vous cliquez sur la carte, les coordonnées des points désirés s’afficheront. Cela va permettre de définir un polygone aux formes variées. Dans ce cas, j’ai détouré brièvement la Bretagne :

google maps polygone couleur

 

Code :

function initialize() {
    var styles = {
        'monTheme': [
        {
            featureType: 'all',
            stylers: [
                {hue: '#0000b0'},
                {invert_lightness: 'true'},
                {saturation: -30}
            ]
        }
    ]};

    var mapOptions = {
        zoom: 6,
        center: new google.maps.LatLng(48,2),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true,
        mapTypeId: 'monTheme'
    }
    var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
    var styledMapType = new google.maps.StyledMapType(styles['monTheme'], {name: 'monTheme'});
    map.mapTypes.set('monTheme', styledMapType);

    var polyCoords = [
        new google.maps.LatLng(47.495308,-2.787781),
        new google.maps.LatLng(47.450751,-2.469177),
        new google.maps.LatLng(47.5287,-2.101135),
        new google.maps.LatLng(47.617643,-2.106628),
        new google.maps.LatLng(47.669457,-2.013245),
        new google.maps.LatLng(47.769238,-1.595764),
        new google.maps.LatLng(47.780313,-1.238708),
        new google.maps.LatLng(48.498772,-1.062927),
        new google.maps.LatLng(48.600588,-1.826477),
        new google.maps.LatLng(48.65142,-2.320862),
        new google.maps.LatLng(48.506051,-2.677917),
        new google.maps.LatLng(48.854234,-3.144836),
        new google.maps.LatLng(48.673189,-3.589783),
        new google.maps.LatLng(48.713075,-4.007263),
        new google.maps.LatLng(48.582422,-4.743347),
        new google.maps.LatLng(48.502411,-4.737854),
        new google.maps.LatLng(48.115133,-4.265442),
        new google.maps.LatLng(48.034387,-4.688416),
        new google.maps.LatLng(47.802456,-4.320374),
        new google.maps.LatLng(47.876197,-3.952332)
    ];

    var poly = new google.maps.Polygon({
        paths:polyCoords,
        strokeColor: "#FF0000",
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: "#FF0000",
        fillOpacity: 0.35
    });
    poly.setMap(map);
}

 

Démo : cliquez ici

 

Carte Google Maps personnalisée avec des marqueurs animés

J’ai placé 2 marqueurs sur cette carte : un marqueur sur Paris et un marqueur sur Strasbourg. Tous deux ont la même taille. Jouez avec les paramètres pour accélérer l’effet ou diminuer / agrandir le rayon du cercle.

carte google marqueur animes

 

Code :

function initialize() {
    var styles = {
        'monTheme': [
        {
            featureType: 'road',
            stylers: [
                {visibility: 'off'}
            ]
        },
        {
            featureType: 'road.arterial',
            stylers: [
                {visibility: 'off'}
            ]
        },
        {
            featureType: 'road.local',
            stylers: [
                {visibility: 'off'}
            ]
        },
        {
            featureType: 'landscape',
            stylers: [
                {visibility: 'off'}
            ]
        },
        {
            featureType: 'water',
            stylers: [
                {visibility: 'on'},
                {lightness: -100 }
            ]
        }
    ]};

    var mapOptions = {
        zoom: 6,
        center: new google.maps.LatLng(48,2),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true,
        mapTypeId: 'monTheme'
    }
    var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
    var styledMapType = new google.maps.StyledMapType(styles['monTheme'], {name: 'monTheme'});
    map.mapTypes.set('monTheme', styledMapType);

    var optionsCircle = {
        center: new google.maps.LatLng(48.856614,2.352222),
        map: map,
        radius: 0,
        strokeColor: '#44aad9',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#afdbf0',
        fillOpacity: 0.35
    }
    var myCircle = new google.maps.Circle(optionsCircle);
    var optionsCircle2 = {
        center: new google.maps.LatLng(48.583148,7.747882),
        map: map,
        radius: 0,
        strokeColor: '#2aa750',
        strokeOpacity: 0.8,
        strokeWeight: 2,
        fillColor: '#79d996',
        fillOpacity: 0.35
    }
    var myCircle2 = new google.maps.Circle(optionsCircle2);
    function agrandirCercle(objetCercle, rayonFinal){
        var rayon = 0;
        var ajoute = 500;
        var delai = 20;
        function incremente(){
            objetCercle.setRadius(rayon);
            if(rayon<=rayonFinal){
                rayon=rayon+ajoute;
                setTimeout(incremente,delai);
            }else {
                rayon=0;
                setTimeout(incremente,delai);
            }
        };
        setTimeout(incremente,delai);
    }
    agrandirCercle(myCircle, 40000);
    agrandirCercle(myCircle2, 40000);
}

 

Démo : cliquez ici

 

Carte avec plusieurs itinéraires de différentes couleurs

Suite à un message dans les commentaires, voici un autre exemple de ce que vous pouvez faire :

couleur-itineraire

 

Code :

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <title>LIJE : Google Maps JavaScript API v3</title>
        <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #map_canvas {
            height: 400px;
            width: 700px;
            margin:50px auto;
        } 
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script> 
    function initialize() {
        var styles = {
            'monTheme': [
            {
                featureType: 'road',
                elementType: 'geometry',
                stylers: [{'visibility': 'simplified'}]
            }, {
                featureType: 'road.arterial',
                stylers: [
                    {hue: 149},
                    {saturation: -78},
                    {lightness: 0}
                ]
            }, {
                featureType: 'road.highway',
                stylers: [
                    {hue: -31},
                    {saturation: -40},
                    {lightness: 2.8}
                ]
            }, {
                featureType: 'poi',
                elementType: 'label',
                stylers: [{'visibility': 'off'}]
            }, {
                featureType: 'landscape',
                stylers: [
                    {hue: 163},
                    {saturation: -26},
                    {lightness: -1.1}
                ]
            }, {
                featureType: 'transit',
                stylers: [{'visibility': 'off'}]
            }, {
                featureType: 'water',
                stylers: [
                    {hue: 3},
                    {saturation: -24.24},
                    {lightness: -38.57}
                ]
            }
        ]}; 

        var mapOptions = {
            zoom: 6,
            center: new google.maps.LatLng(48,2),
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            disableDefaultUI: true,
            mapTypeId: 'monTheme'
        }
        var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
        var styledMapType = new google.maps.StyledMapType(styles['monTheme'], {name: 'monTheme'});
        map.mapTypes.set('monTheme', styledMapType);

        var myLatLng = new google.maps.LatLng(48.583148,7.747882);
        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            title: 'Strasbourg'
        });

        var myLatLng2 = new google.maps.LatLng(47.218371,-1.553621);
        var marker2 = new google.maps.Marker({
            position: myLatLng2,
            map: map,
            title: 'Nantes'
        });

        var myLatLng3 = new google.maps.LatLng(49.494370,0.107929);
        var marker3 = new google.maps.Marker({
            position: myLatLng,
            map: map,
            title: 'Le Havre'
        });

        var myLatLng4 = new google.maps.LatLng(47.322047,5.041480);
        var marker4 = new google.maps.Marker({
            position: myLatLng2,
            map: map,
            title: 'Dijon'
        });

        // trajet 1
        var directionsService = new google.maps.DirectionsService();
        var directionsDisplay = new google.maps.DirectionsRenderer({ 'map': map });
        var request = {
            origin : myLatLng,
            destination: myLatLng2,
            travelMode : google.maps.DirectionsTravelMode.DRIVING,
            unitSystem: google.maps.DirectionsUnitSystem.METRIC
        };

        directionsService.route(request, function(response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay.setDirections(response);
                directionsDisplay.suppressMarkers = true;
                directionsDisplay.setOptions({polylineOptions:{strokeColor: '#008000'}, preserveViewport: true});
            }
        });

        // trajet 2
        var directionsService2 = new google.maps.DirectionsService();
        var directionsDisplay2 = new google.maps.DirectionsRenderer({ 'map': map });
        var request = {
            origin : myLatLng3,
            destination: myLatLng4,
            travelMode : google.maps.DirectionsTravelMode.DRIVING,
            unitSystem: google.maps.DirectionsUnitSystem.METRIC
        };

        directionsService2.route(request, function(response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                directionsDisplay2.setDirections(response);
                directionsDisplay2.suppressMarkers = true;
                directionsDisplay2.setOptions({polylineOptions:{strokeColor: '#800000'}, preserveViewport: true});
            }
        }); 
    }
    </script>
</head>
<body onload="initialize()">
    <div id="map_canvas"></div>
</body>
</html>

 

Démo : cliquez ici

 

Voila ! Si vous souhaitez que j’ajoute certain type de carte, mettez moi un petit commentaire. J’essaierai de les ajouter de temps à autre. Envoyez-moi vos réalisations en commentaire ;)

 

EDIT :

Il semblerait que dans certains cas, les marker (icônes) par défaut ne se cachent plus. C’est notamment le cas pour les itinéraires. Au lieu d’utiliser le code

directionsDisplay.suppressMarkers = true;

je vous conseille plutôt d’utiliser

directionsDisplay.setOptions({'suppressMarkers':true});

 

Donc en entier :

directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
        directionsDisplay.setOptions({'suppressMarkers':true});
    }
});