Vous souhaitez ne plus utiliser Google Maps pour diverse raison et vous cherchez une alternative pour afficher une simple carte avec un marqueur sur votre site web.

Je vous propose d’utiliser une bibliothèque JavaScript libre utilisée par de nombreux grands sites tels que Wikipedia, Craigslist, Github, The Washington Post, etc. Nul doute que cette liste va augmenter rapidement à la suite des changements de tarifs surprenants de Google Map en juin 2018.


Je vous invite à lire cet article très intéressant sur l’augmentation des tarifs Google Map
https://medium.com....

Open Street Map

Open Street Map est un projet libre qui a pour but de constituer une base de données géographique du monde. De la même manière que Wikipedia, il permet à toute personne d’intervenir et de collaborer pour ajouter des informations. Attention, il ne s’agit pas d’un système de navigation, mais bien une base de données. C’est pour cela qu’il faut utiliser d’autres outils pour pouvoir exploiter les informations de cette base.

Leaflet

Leaflet est une bibliothèque JavaScript libre de cartographie développée par Vladimir Agafonkin ainsi que de nombreux contributeurs.
Elle permet d’utiliser les données provenant des bases de données Open Street Map d’une manière assez simple.

Vous pouvez également l'utiliser avec Map Box (service payant) si vous le souhaitez.

Intégrer Open Street Map sur votre site avec Leaflet

Personnellement, j'utilise Webpack sur mes projets et npm/yarn. Pour plus de simplicité dans ce tutoriel, je vais utiliser de simples balises pour importer le JavaScript et le CSS nécessaires.

Dans un premier temps, nous allons partir sur un document HTML simple.

  • Il faut importer les éléments CSS et JS de Leaflet.
  • Ensuite, définir une hauteur par défaut pour le container de la carte.
  • Ajouter le container (un simple div) avec un id qui va nous servir pour initialiser la carte.
  • Puis ajouter une balise script où l'on va définir le code JavaScript pour définir la carte.
  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Ma carte</title>
    <!-- import du css et du js -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>
    <!-- definir une hauteur par defaut -->
    <style>
        #map {
            height: 300px;
        }
    </style>
</head>
<body>
    <!-- le container de la map -->
    <div id="map"></div>
    <!-- le code pour lancer la carte -->
    <script type="text/javascript">
    </script>
</body>
</html>

Maintenant, nous allons nous concentrer sur le code JavaScript à insérer. Je vais donc vous donner uniquement le code à ajouter entre les balises script.
Nous allons donc créer des variables pour définir les coordonnées et le niveau de zoom.

J’ai choisi la Tour Eiffel pour l’exemple ;)


Vous pouvez trouver les coordonnées d'une adresse en utilisant ce service par exemple :
http://www.gpsfrance.net/adres...

  var lat = 48.85837;
var long = 2.294481;
var zoom = 14;

Ensuite, il faut initialiser la carte en ciblant l'élément "map".

  var mymap = L.map('map', {
    center: [lat, long],
    zoom: zoom,
});

Si vous testez, vous allez voir apparaitre un rectangle gris avec en haut à gauche, un contrôle de zoom. Si vous voyez ça, vous êtes bon.

Nous allons brancher maintenant notre système avec Open Street Map pour récupérer les cartes à afficher.

  L.tileLayer( 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
    subdomains: ['a','b','c']
}).addTo( mymap );

Voilà, désormais, vous avez une carte qui s’affiche avec le Champ de Mars au centre.
Il nous reste juste à ajouter un marqueur avec les coordonnées précédemment déterminées avec une petite popup attachée pour afficher du texte

  var marker = L.marker([lat, long]).bindPopup( '<p><strong>Champ de Mars<strong><br /> 5 Avenue Anatole France<br /> 75007 Paris, France</p>' ).addTo(mymap);
// option -> pour ouvrir la popup à l'affichage
marker.fire('click');

Vous avez maintenant une belle carte avec un marqueur sur une adresse précise qui affiche du texte dans une popup.

Optimisation pour le mobile

Vous pouvez ajouter un petit code supplémentaire pour bloquer le scroll de la carte sur mobile. À la manière de Google Maps, cela demande d’utiliser les 2 doigts pour bouger et naviguer sur la carte et permet de ne pas bloquer le scroll de la page.


Pour cela, il faut ajouter une petite librairie qui se branche sur Leaflet:
https://github.com/elmarquis/Leaflet.GestureHandling


Dans le head du document, ajouter le code suivant pour récupérer le JS et le CSS.

  <link rel="stylesheet" href="https://unpkg.com/leaflet-gesture-handling@1.1.7/dist/leaflet-gesture-handling.min.css" type="text/css">
<script src="https://unpkg.com/leaflet-gesture-handling@1.1.7/dist/leaflet-gesture-handling.min.js"></script>

Ensuite, ajouter l’option gestureHandling dans l’initialisation de la carte.

  var mymap = L.map('mapid', {
    center: [lat, long],
    zoom: zoom,
    gestureHandling: true // ajout de l'option
});

Le code complet

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Ma carte</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/leaflet-gesture-handling@1.1.7/dist/leaflet-gesture-handling.min.css" type="text/css">
    <script src="https://unpkg.com/leaflet-gesture-handling@1.1.7/dist/leaflet-gesture-handling.min.js"></script>
    <style>
        #map {
            height: 300px;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script type="text/javascript">
        var lat = 48.85837;
        var long = 2.294481;
        var zoom = 14;

        var mymap = L.map('map', {
            center: [lat, long],
            zoom: zoom,
            gestureHandling: true
        });

        L.tileLayer( 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
            subdomains: ['a','b','c']
        }).addTo( mymap );

        var marker = L.marker([lat, long]).bindPopup( '<p><strong>Champ de Mars<strong><br /> 5 Avenue Anatole France<br /> 75007 Paris, France</p>' ).addTo(mymap);
    </script>
</body>
</html>

Correction bug

J'ai rencontré un petit souci sur certaines cartes avec des absences de fond de carte. Une partie de la carte reste grise. J'ai donc un petit hack pour régler ce souci.

Il faut ajouter ce petit bout de code avant la fermeture de la balise script.

  setTimeout(function(){mymap.invalidateSize()},200);};

Les alternatives payantes

Si vous avez un besoin plus professionnel, il existe également des solutions alternatives à l’offre de Google :


L’alternative française : https://www.jawg.io/
Le challenger américain : https://www.mapbox.com/


Retrouvez aussi 11 offres avec les avantages et inconvénients sur ce lien:
https://www.journaldunet.com/solutions/seo-referencement/1209643-11-alternatives-a-google-maps-leur-cout-leurs-avantages/

6 étapes pour rendre votre entreprise visible sur internet
La vitesse de chargement dans les résultats Google sur mobile.