Programmation Webmapping 2017

La cartographie en ligne : MySQL et

PHP avec Google Maps

Elaboré par : Mr. Moussi Abdelkader

Orienté à : 4GT

| Confidential
Programmation Webmapping 2017

PRÉSENTATION

Vue d'ensemble

Ce tutoriel vous montre comment afficher des informations à partir d'une base de données MySQL sur
une carte Google en utilisant l'API JavaScript Google Maps. Il convient à des gens avec des
connaissances intermédiaires de MySQL, PHP et XML.

Google Maps

Architecture 3-tiers

La carte dans ce tutoriel affiche dans Google Maps x types de marqueurs pour différencier entre
l'emplacement des restaurants et des bars respectivement. Une base de données MySQL stocke des
informations sur les emplacements de marqueurs individuels comme le type de lieu (que ce soit un
restaurant ou un bar), son nom, l'adresse et les coordonnées géographiques. La carte récupère ces
informations de la base de données, via un fichier XML qui agit comme un intermédiaire entre la base
de données et la carte. Vous pouvez utiliser des instructions PHP pour exporter les informations de
marqueur de la base de données vers un fichier XML.

Cliquez sur un marqueur sur la carte ci-dessous pour afficher une fenêtre d'information avec le nom et
l'adresse emplacement. Les marqueurs ont les étiquettes de R ou « B », et ils vous montrent
l'emplacement des restaurants et des bars respectivement.

| Confidential
Programmation Webmapping 2017

Mise en place de l’environnement web

1) Installer la version 32 Bits de wampserver2.5-Apache-2.4.9-Mysql-5.6.17-php5.5.12-32b.exe

dans C://

NB : Si votre Windows est 64 Bits, vous devez installer « wampserver2.5-Apache-2.4.9-Mysql-

5.6.17-php5.5.12-64b.exe ».

| Confidential
Programmation Webmapping 2017

| Confidential
Programmation Webmapping 2017

| Confidential
Programmation Webmapping 2017

| Confidential
Programmation Webmapping 2017

2) Création d'une table dans MySQL

Créer une table MySQL contenant des attributs des marqueurs sur la carte, comme le marqueur id,
name, address, lat, lng et type.

L'attribut id sert de clé primaire, et l'attribut type établit une distinction entre les restaurants et les bars.

Pour garder l'espace de stockage pour votre table au minimum, vous pouvez spécifier les attributs lat
et lng à flotteurs de taille (10,6). Cela permet aux champs de stocker 6 chiffres après la virgule, et
jusqu'à 4 chiffres avant la virgule.

Vous pouvez interagir avec le datbase MySQL via l'interface phpMyAmin. La capture d'écran ci-
dessous affiche la configuration de la table dans phpMyAdmin.

| Confidential
Programmation Webmapping 2017

Vous pouvez également utiliser les commandes SQL pour créer la table, comme dans l'instruction
SQL ci-dessous.

CREATE TABLE `markers` (

`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,

`name` VARCHAR( 60 ) NOT NULL ,

`address` VARCHAR( 80 ) NOT NULL ,

`lat` FLOAT( 10, 6 ) NOT NULL ,

`lng` FLOAT( 10, 6 ) NOT NULL ,

`type` VARCHAR( 30 ) NOT NULL

) ENGINE = MYISAM ;

| Confidential
Programmation Webmapping 2017

Créer une base de données avec

le nom « data_markers »

| Confidential
Programmation Webmapping 2017

Copier/Coller le code de création de la table « markers » suivant:

CREATE TABLE `markers` (

`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`name` VARCHAR( 60 ) NOT NULL ,
`address` VARCHAR( 80 ) NOT NULL ,
`lat` FLOAT( 10, 6 ) NOT NULL ,
`lng` FLOAT( 10, 6 ) NOT NULL ,
`type` VARCHAR( 30 ) NOT NULL
) ENGINE = MYISAM ;

| Confidential
Programmation Webmapping 2017

Execter la requête :

| Confidential
Programmation Webmapping 2017

3) Peuplant la table (insertion des données)

On a trois méthodes d’insertion :

1- Vous pouvez importer les données de marquage dans la base de données SQL en utilisant la
fonctionnalité « Importer » de l'interface phpMyAdmin qui vous permet d'importer des
données dans différents formats.

Ci-dessous les données de marqueur pour la carte dans ce tutoriel, dans le format .csv.

| Confidential
Programmation Webmapping 2017

2- Insérer manuellement les données avec l’interface phpMyAdmin :

3- Vous pouvez également utiliser les commandes SQL ci-dessous pour importer les données de
marquage dans la table SQL.

INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Love.Fish', '580 Darling
Street, Rozelle, NSW', '-33.861034', '151.171936', 'restaurant');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Young Henrys', '76
Wilford Street, Newtown, NSW', '-33.898113', '151.174469', 'bar');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Hunter Gatherer',
'Greenwood Plaza, 36 Blue St, North Sydney NSW', '-33.840282', '151.207474', 'bar');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('The Potting Shed', '7A, 2
Huntley Street, Alexandria, NSW', '-33.910751', '151.194168', 'bar');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Nomad', '16 Foster Street,
Surry Hills, NSW', '-33.879917', '151.210449', 'bar');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Three Blue Ducks', '43
Macpherson Street, Bronte, NSW', '-33.906357', '151.263763', 'restaurant');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Single Origin Roasters',
'60-64 Reservoir Street, Surry Hills, NSW', '-33.881123', '151.209656', 'restaurant');
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`, `type`) VALUES ('Red Lantern', '60 Riley
Street, Darlinghurst, NSW', '-33.874737', '151.215530', 'restaurant');

| Confidential
Programmation Webmapping 2017

| Confidential
Programmation Webmapping 2017

| Confidential
Programmation Webmapping 2017

4) Exportation des données en XML en utilisant PHP

À ce stade, vous devriez avoir une table nommée markers contenant les données de marqueur de
carte. Cette section vous montre comment d'exporter les données de table à partir de la base de
données SQL dans un format XML, en utilisant des instructions PHP. La carte peut utiliser le fichier
XML pour récupérer les données de repérage au moyen d' appels JavaScript asynchrone.

L'utilisation d'un fichier XML d'intermédiaire entre votre base de données et votre carte Google
permet de chargement de la page initiale plus rapide, et une application de carte plus souple. Il rend le
débogage plus facile que vous pouvez vérifier de manière indépendante la sortie XML à partir de la
base de données et l'analyse syntaxique JavaScript du XML. Vous pouvez également exécuter la carte
entièrement basée sur des fichiers XML statiques, et ne pas utiliser la base de données MySQL.

Si vous ne l'avez jamais utilisé PHP pour se connecter à une base de données MySQL, consultez le
site php.net et lire sur mysql_connect, mysql_select_db, my_sql_query et mysql_error.

Vous pouvez utiliser l'une des trois techniques différentes ci-dessous pour afficher les données de
table SQL en XML avec PHP.

 Utilisation des fonctions XML DOM de PHP à XML de sortie

 En utilisant l'écho de PHP XML de sortie
 Utilisation des fonctions DOM de PHP à XML de sortie

Lorsque vous utilisez un navigateur public d'accéder à une base de données en utilisant les fichiers
PHP, il est important de veiller à ce que vos informations d'identification de base de données sont en
sécurité. Vous pouvez le faire en mettant vos informations de connexion de base de données dans un
fichier PHP distinct de celui du principal code PHP. Le fichier avec vos informations d'identification
devrait ressembler à celui ci-dessous, mais contenant vos propres informations de base de données.

<? php
$ username = "nom d'utilisateur" ;
$ password = "mot de passe" ;
$ database = "nom d'utilisateur-databaseName";?>

| Confidential
Programmation Webmapping 2017

- Créer le dossier de l’application web «data_markers » sous le répertoire : C:\wamp\www

- Ouvrir Notepade++ et copier / coller le code suivant :

<?php
$ username = "nom d'utilisateur" ;
$ password = "mot de passe" ;
$ database = "nom d'utilisateur-databaseName";?>

| Confidential
Programmation Webmapping 2017

- Modifier les paramètres de connections et changer le language en PHP:

<?php

$hostname = "localhost";

$username = "root";

$password = "";

$database = "data_markers";

?>

- Enregistrer le fichier php dans le dossier de l’application et avec le non ‘connection’ :

| Confidential
Programmation Webmapping 2017

- Tester l’application en tappant : http://localhost/data_markers/ dans le navigateur :

5) Utilisation des fonctions XML DOM de PHP à XML de sortie

Les fonctions XML DOM de PHP prendre soin des subtilités telles que échapper des entités spéciales
dans le fichier XML, et il est facile de créer XML avec des structures plus complexes. Vous pouvez
utiliser les fonctions DOM XML pour créer des noeuds XML, ajoutez nœuds enfants, et la sortie d' un
document XML à l'écran. Pour déterminer si PHP de votre serveur à la fonctionnalité XML DOM
activée, vérifiez votre configuration ou essayez d' initialiser un domxml_new_doc().

| Confidential
Programmation Webmapping 2017

- Créer une nouvelle page notepade++ et insérer le code suivant :

<?php
require("connection.php");
function parseToXML($htmlStr)
{
$xmlStr=str_replace('<','&lt;',$htmlStr);
$xmlStr=str_replace('>','&gt;',$xmlStr);
$xmlStr=str_replace('"','&quot;',$xmlStr);
$xmlStr=str_replace("'",'&#39;',$xmlStr);
$xmlStr=str_replace("&",'&amp;',$xmlStr);
return $xmlStr;
}
// Opens a connection to a MySQL server
$connection=mysqli_connect ("localhost", "root", "");
if (!$connection) {
die('Not connected : ' . mysql_error());
}
// Set the active MySQL database
$db_selected = mysqli_select_db($connection,"data_markers");
if (!$db_selected) {
die ('Can\'t use db : ' . mysql_error());
}
// Select all the rows in the markers table
//$query = "SELECT * FROM markers";
$result = mysqli_query($connection,"SELECT * FROM markers");
if (!$result) {
die('Invalid query: ' . mysql_error());
}
header("Content-type: text/xml");

// Start XML file, echo parent node

echo '<markers>';
// Iterate through the rows, printing XML nodes for each
while ($row = @mysqli_fetch_assoc($result)){
// Add to XML document node
echo '<marker ';
echo 'name="' . parseToXML($row['name']) . '" ';
echo 'address="' . parseToXML($row['address']) . '" ';
echo 'lat="' . $row['lat'] . '" ';
echo 'lng="' . $row['lng'] . '" ';
echo 'type="' . $row['type'] . '" ';
echo '/>';
}
// End XML file
echo '</markers>';
?>

| Confidential
Programmation Webmapping 2017

- Enregistrer le fichie php sous le nom ‘phpsqlajax_genxml’ dans le répertoire de l’application:

- Vérification du fichier XML

Pour confirmer que le script PHP est produit XML valide, appelez le fichier script php créé à partir de
votre navigateur pour voir la sortie XML comme ci-dessous.

| Confidential
Programmation Webmapping 2017

6) Création de la carte

Une fois que vous obtenez la sortie XML correct dans votre navigateur, il est temps de créer la carte
avec JavaScript. Si vous ne l'avez jamais créé une v3 Google Map, s'il vous plaît essayer quelques-uns
des exemples de base de la documentation pour vous assurer que vous comprenez les bases de la
création d'une carte.

- Configuration de la mise en page

Voici une capture d'écran et le code de la page Web qui lie le tout ( phpsqlsearch_map.html ). Lorsque
la page se charge, la fonction est appelée. Cette fonction met en place la carte et le menu déroulant des
résultats .

Copier / coller ce code dans une page Notepad ++ et enregistrer le fichier avec le nom
‘phpsqlsearch_map’ en language HTML :

<!DOCTYPE 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>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#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>
var customLabel = {
restaurant: {
label: 'R'
},
bar: {
label: 'B'
}
};
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {

| Confidential
Programmation Webmapping 2017

center: new google.maps.LatLng(-33.863276, 151.207977),

zoom: 12
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP or XML file
downloadUrl("phpsqlajax_genxml.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName('marker');
Array.prototype.forEach.call(markers, function(markerElem) {
var name = markerElem.getAttribute('name');
var address = markerElem.getAttribute('address');
var type = markerElem.getAttribute('type');
var point = new google.maps.LatLng(
parseFloat(markerElem.getAttribute('lat')),
parseFloat(markerElem.getAttribute('lng')));
var infowincontent = document.createElement('div');
var strong = document.createElement('strong');
strong.textContent = name
infowincontent.appendChild(strong);
infowincontent.appendChild(document.createElement('br'));
var text = document.createElement('text');
text.textContent = address
infowincontent.appendChild(text);
var icon = customLabel[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
label: icon.label
});
marker.addListener('click', function() {
infoWindow.setContent(infowincontent);
infoWindow.open(map, marker);
});
});
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
| Confidential
Programmation Webmapping 2017

request.send(null);
}
function doNothing() {}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDWCovltbcCEWyjbR5vvuby1IKkuNM9
HIg&callback=initMap">
</script>
</body>
</html>

- Changer la clé API Google :

Avec : key=AIzaSyDWCovltbcCEWyjbR5vvuby1IKkuNM9HIg

| Confidential
Programmation Webmapping 2017

Remarque : consulter la page suivante pour obtenir une clé d’API Google Maps :

https://developers.google.com/maps/documentation/javascript/get-api-key

- Enregister le fichier et lancer la page ‘http://localhost/data_markers/phpsqlsearch_map.html’ dans

le navigateur :

| Confidential