Home » Programmation Web » API » Utiliser MySQL et PHP avec Google Maps (2/x)

Utiliser MySQL et PHP avec Google Maps (2/x)

Voici la suite de l’article Utiliser MySQL et PHP avec Google Maps (1/x), qui posait la problématique de la non mise à jour d’une documentation technique.
Pour montrer cette problématique, j’avais pris l’exemple d’une page de la documentation de Google Maps : Using MySQL and PHP with Google Maps.

Rendu de mon script

J’ai donc fait un script qui permet d’afficher plusieurs markers sur une carte Google Maps.
Le code est simple et rapide. Je l’ai mis à jour par rapport au spécificité de PHP7, et j’ai remplacé XML par Json.
Vous pouvez retrouver le rendu final sur ce lien.

Getting started

Pour commencer ce tutoriel, je devais récupérer des données avec des lieux (et des coordonnées).
Je suis donc allé sur le site data.gouv.fr, et j’y ai récupéré des données sur les Radars automatiques en France, au format CSV.

J’ai préparé ces données au formats SQL pour le tutoriel, et je vous partage le résultat : radar automatique (format SQL).

Voici ci-dessous, la structure de base du fichier SQL.

CREATE TABLE `radars` (
  `id` int(11) NOT NULL,
  `date_changement` varchar(255) NOT NULL,
  `date_creation` varchar(255) NOT NULL,
  `departement` varchar(11) NOT NULL,
  `latitude` varchar(255) NOT NULL,
  `longitude` varchar(255) NOT NULL,
  `direction` varchar(255) NOT NULL,
  `equipement` varchar(255) NOT NULL,
  `date_installation` varchar(255) NOT NULL,
  `type` varchar(255) NOT NULL,
  `emplacement` varchar(255) NOT NULL,
  `route` varchar(255) NOT NULL,
  `longueur _troncon` varchar(255) NOT NULL,
  `vitesse_poids_lourds` int(11) DEFAULT NULL,
  `vitesse_poids_leger` int(11) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

Je n’utiliserai pas toutes les données de ce fichier SQL pour ce tutoriel en particulier. Mais n’hésitez pas à jouer avec, de votre côté 😉

Récupération des données de la base

En PHP 7, il est conseillé d’utiliser PDO pour récupérer les infos en base de donnée.
Voici le code complet qui me permet de récupérer la liste des radars de la Haute-Garonne. C’est le code le plus simple possible.

<?php
// connexion BDD
$bdd    = new PDO('mysql:host=localhost;dbname=poi;charset=utf8', 'root', 'admin');

// Récupération des données en BDD
$departement = '31';
$sql    =  "SELECT `id`, `departement`, `latitude`, `longitude`, `direction`, `type`, `emplacement`, `route` FROM `radars` WHERE `departement` = ?";
$res = $bdd->prepare($sql);
$res->bindParam(1, $departement, PDO::PARAM_INT);
$res->execute();
$data   = $res->fetchAll();
?>

A savoir que je n’affiche que les radars du département de la Haute-Garonne.
Afficher tous les markers de la France rendrai la visibilité plus indigeste. Mais je pourrai ajouter une fonctionnalité de MarkerClusterer plus tard

Création de la maps

La première chose que je souhaite faire, est d’afficher la carte sur toute la page.

<style>
#map {
	height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
	height: 100%;
	margin: 0;
	padding: 0;
}
</style>

Ensuite, je souhaite initialiser ma carte Google Maps. Dans mon exemple, je le faut au niveau de la Haute-Garonne.

var map = new google.maps.Map(document.getElementById('map'), {
	center: new google.maps.LatLng(43.4010462, 1.135302),
	zoom: 9
});

Ensuite, il faut intégrer l’affichage de markers.
Les paramètres de base sont les coordonnées des markers, et l’initialisation de la map.
Le paramètre title n’est pas obligatoire. Il affiche juste une tooltip au survol du marker.

var myLatLng = new google.maps.LatLng(infos['latitude'], infos['longitude']);

var marker = new google.maps.Marker({
	position: myLatLng,
	map: map,
	title: 'Hello World !'
});

Je finalise le script en ajoutant les infoswindow.
Au click sur un marker, j’affiche l’infowindow qui va bien.
La variable infowincontent contient toutes les informations que vous souhaitez y mettre.

marker.addListener('click', function() {
  infoWindow.setContent(infowincontent);
  infoWindow.open(map, marker);
});

Script complet

Je met tous ces codes ensemble, et cela donne le code ci-dessous.
Il suffit juste de changer les informations de connexion à la base de données, et le code fonctionnera.
C’est le même code que mon rendu final.
Si vous avez des questions sur le script, n’hésitez pas à me les poser. J’y répondrai 🙂

<?php
// connexion BDD
$bdd    = new PDO('mysql:host=localhost;dbname=poi;charset=utf8', 'root', 'admin');

// Récupération des données en BDD
$departement = '31';
$sql    =  "SELECT `id`, `departement`, `latitude`, `longitude`, `direction`, `type`, `emplacement`, `route` FROM `radars` WHERE `departement` = ?";
$res = $bdd->prepare($sql);
$res->bindParam(1, $departement, PDO::PARAM_INT);
$res->execute();
$data   = $res->fetchAll();
?>

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        <title>Using MySQL and PHP with Google Maps</title>
        <style>
            #map {
                height: 100%;
            }
            /* Optional: Makes the sample page fill the window. */
            html, body {
                height: 100%;
                margin: 0;
                padding: 0;
            }
        </style>
    </head>


<body>
    <div id="map"></div>

    <script>
        function initMap() {
            var map = new google.maps.Map(document.getElementById('map'), {
                center: new google.maps.LatLng(43.4010462, 1.135302),
                zoom: 9
            });

            var results = <?= json_encode($data); ?>

            setMarkers(map,results);
        }

        function setMarkers(map,locations) {
            for(var i=0; i<locations.length; i++){
                var station = locations[i];
                var myLatLng = new google.maps.LatLng(station['latitude'], station['longitude']);
                var infoWindow = new google.maps.InfoWindow();

                var marker = new google.maps.Marker({
                    position: myLatLng,
                    map: map,
                    title: station['marker_ville']
                });

                (function(i){
                    google.maps.event.addListener(marker, "click",function(){
                        var station = locations[i];
                        infoWindow.close();

                        infoWindow.setContent(
                            "<div id='infoWindow'>"
                            +"<p>Département : "+station['departement']+"<p>"
                            +"<p>Direction : "+station['direction']+"<p>"
                            +"<p>Département : "+station['emplacement']+"<p>"
                            +"<p>Coordonnée : "+station['latitude']+", "+station['longitude']+"<p>"
                            +"<p>Route : "+station['route']+"<p>"
                            +"<p>Type : "+station['type']+"<p>"
                            +"</div>"
                        );
                        infoWindow.open(map,this);
                    });
                })(i);
            }
        }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCmMtcoMz3LWgSGfAJ-VERFE6zMUofv_xk&callback=initMap"></script>
</body>
</html>

Posté dans API, Langages Web, PHP, Programmation Web

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.