Google
 

CREATION D'UNE CARTE ET D'UNE LISTE - PHP MYSQL JSON setImage

PRESENTATION

Dans cet exemple, nous allons créer une carte, dont les données extraites d'une base de donnée MySQL, vont nous permettre de générer un fichier au format JSON, afin d'afficher une liste de nom et de marqueurs.

La carte créée adopte, automatiquement, le zoom optimum de façon à rendre visibles tous les marqueurs.

Le marqueur :

  • Le survol d'un marqueur par la souris, déclenche son changement de couleur (vert - > rouge) [ maker.setImage("couleur.png") ], et l'affichage d'information sous celui-ci.
  • Un click sur le marqueur déclenche l'ouverture de son info-bulle, et surligne, dans la liste située à droite de l'écran, l'information correspondante.

La liste située à droite de l'écran :

  • Le survol d'une information contenue dans la liste, déclenche le changement de sa couleur de fond (blanc -> rouge), et le changement de couleur du marqueur qui lui est associé (vert -> rouge).
  • Un click sur une information contenue dans la liste, déclenche le changement de sa couleur de fond (rouge -> vert), le changement de couleur du marqueur qui lui est associé (vert -> rouge) et l'ouverture de son info-bulle.

COMMENT FAIRE ?

Pour reproduire cet exemple vous allez avoir besoin des fichiers suivants :

  • index.htm
  • fonctions.js
  • style.css
  • connexionBD.php
  • json.php

des trois images : puce de couleur bleue  puce.gif    -    marqueur de couleur verte  vert.png    -    marqueur de couleur rouge  rouge.png

et d'une base de données contenant vos informations.

Voici un schéma représentant l'emplacement de ces fichiers sur votre serveur

 Votre serveur
 - include
   - connexionBD.php
 - www
   - index.htm
   - fonctions.js
   - style.css
   - json.php
   - puce.gif
   - vert.png
   - rouge.png

 

Attention : si vous copier ces codes pour ensuite les coller dans le "bloc note" par exemple, assurez-vous que vous enregistrez ces fichiers avec un codage UTF-8 (et non ANSI). Dans le cas contraire les caractères accentués seront remplacés par des caratères bizarroïdes, et votre fichier XML fonctionnera sous FireFox, mais pas sous Internet Explorer.

 

Cliquez ci-après, pour Télécharger les fichiers de l'exemple : Google Maps API : Création d'une carte et d'une liste interactives via php mysql json

 

Création de la base de données

Téléchargez le fichier : creationBD.txt 

CREATE TABLE `lieux` (
	`id` INT NOT NULL auto_increment,
	`latitude` float(10,6) NOT NULL,
	`longitude` float(10,6) NOT NULL,
	`type` varchar(255) NOT NULL,
	`nom` varchar(255) NOT NULL,
	`adresse` varchar(255) NOT NULL,
	`codepostal` float(5,0) NOT NULL,
	`ville` varchar(255) NOT NULL,
	PRIMARY KEY  (`id`)
) ENGINE=MyISAM;

Remplir la base de données

Téléchargez le fichier : donneesBD.txt 

INSERT INTO `lieux` (`id`, `latitude`, `longitude`, `type`, `nom`, `adresse`, `codepostal`, `ville`)
VALUES (1, 47.391174, 0.722265, 'Moto', 'Honda Moto Tours', '108-110, avenue de le République', 37700, 'Saint-Pierre-des-Corps'),
(2, 47.417690, 0.691023, 'Moto', 'Kawasaki Tours Touraine Moto', '142, avenue Maginot', 37100, 'Tours'),
(3, 47.382603, 0.726686, 'Moto', 'Pocket Bike Mania', '51, rue Grands Mortiers|ZA Grands Mortiers', 37700, 'Saint-Pierre-des-Corps'),
(4, 47.382603, 0.726686, 'Karting', 'Pole Karting Services', '6, rue Gustave Eiffel - Z.I. N° 1', 37300, 'Joué-les-Tours'),
(5, 47.419094, 0.693244, 'Moto', 'Team Deletang', '143-147, avenue Andre Maginot', 37100, 'Tours'),
(6, 47.419971, 0.662139, 'Moto', 'Bellanger Motos', '220, boulevard Charles de Gaulle', 37540, 'Saint-Cyr-sur-Loire'),
(7, 47.419724, 0.661333, 'Moto', 'Déclic''Motos', '1, rue Pierre de Coubertin', 37540, 'Saint-Cyr-sur-Loire'),
(8, 47.419777, 0.661056, 'Moto', 'FD Moto Shop', '3, rue Pierre de Coubertin', 37540, 'Saint-Cyr-sur-Loire'),
(9, 47.354687, 0.673428, 'Moto', 'New Motorz', '5 bis, rue de Chambray', 37300, 'Joué-les-Tours'),
(10, 47.395329, 0.746727, 'Karting', 'Fun Kart Loisirs', 'ld Louche Saint Martin', 37700, 'la-Ville-aux-Dames'),
(11, 47.358753, 0.734775, 'Karting', 'Karting Club du Ripault', '6 rue Camusière', 37550, 'Saint-Avertin'),
(12, 47.387417, 0.760717, 'Karting', 'Gokart', 'rue Louise de la Vallière', 37700, 'la-Ville-aux-Dames'),
(13, 47.459476, 0.674672, 'Quad', 'Fun Quad Evasion', 'Z.I Les Gaudières', 37390, 'Mettray'),
(14, 47.338364, 0.616983, 'Quad', 'Dom Quad Motoculture', '9, bis boulevard Jean Jaurès', 37510, 'Ballan-Miré'),
(15, 47.464390, 0.773388, 'Aero', 'Touraine Montgolfière', 'La Petite Baltière', 37210, 'Rochecorbon'),
(16, 47.345451, 0.542879, 'Moto', 'Dakota', 'boulevard de Chinon|Autoroute A85 sortie N°1°', 37510, 'Ballan-Miré'),
(17, 47.253136, 0.543823, 'Quad', 'Team Quad 37', '22, chemin des Aunays', 37190, 'Saché'),
(18, 47.323463, 0.918732, 'Aero', 'Air Ouest ULM', 'Aérodrome de Tours-Sorigny', 37250, 'Sorigny'),
(19, 47.352779, 0.952377, 'Aero', 'Ailes Tourangelles', 'Aérodrome d''Amboise Dierre', 37150, 'Dierre'),
(20, 47.547798, 0.546355, 'Quad', 'SARL Plé', 'Le Moulin de Pérran', 37360, 'Neuillé-Pont-Pierre'),
(21, 47.547798, 0.546355, 'Moto', 'SP Moto 37', 'RN 143 route de Loches', 37170, 'Chambray-lès-Tours'),
(22, 47.201180, 0.652281, 'Karting', 'Formule Kart Touraine', 'Les Circuits de Touraine|La Laurière - D21', 37260, '37260'),
(23, 47.424278, 0.982107, 'Aero', 'Balloon Revolution', '3, rue du Colombier', 37530, 'Pocé-sur-Cisse'),
(24, 47.398350, 1.005764, 'Moto', 'Olivier Motos Quads', 'Boulevard Saint Denis Hors (D31)', 37400, 'Amboise'),
(25, 47.617271, 0.595322, 'Aero', 'Air Touraine Hélicoptère', 'Héliport de Belleville', 37370, 'Neuvy-le-Roi'),
(26, 47.164742, 0.786381, 'Aero', 'Touraine Planeur', 'Le Louroux', 37240, 'Le-Louroux'),
(27, 47.451309, 0.320320, 'Aero', 'Aeroclub de Savigne', 'Les Champs Marquis', 37340, 'Savigné-sur-Lathan'),
(28, 47.254185, 0.300922, 'Quad', 'Le Clos d''Ussé', '7, rue Principale', 37420, 'Rigny-Ussé'),
(29, 47.154945, 1.010517, 'Aero', 'Natur''Ailes', 'Base ULM ''Les Jolletières''', 37600, 'Loches'),
(30, 47.285198, 1.159358, 'Aero', 'Art Montgolfières', 'Les Bruyères', 41400, 'Saint-Georges-sur-Cher'),
(31, 47.343082, 1.185086, 'Aero', 'France Montgolfières - Balloon Flights', '24, rue Nationale', 41400, 'Montrichard'),
(32, 47.063808, 0.492325, 'Quad', 'Loca - Quads', 'le Village du Bois', 37220, 'Rilly-sur-Vienne'),
(33, 47.504829, 1.196705, 'Aero', 'Aérocom', '36, route de Chouzy', 41150, 'Onzain'),
(34, 47.166573, 0.239178, 'Moto', 'Chinon Motos', '31-33, rue du Commerce', 37500, 'Chinon');

 

Fichier HTM : index.htm

Téléchargez le fichier : index.htm

ATTENTION : n'oubliez pas d'indiquer votre clé API 

<?xml version="1.0" encoding="utf-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Touraineverte : PHP MySQL JSON API Google Maps JavaScript</title> 
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=VOTRE_CLE_API_ICI" type="text/javascript"></script> 
<script src="fonctions.js" type="text/javascript"></script> 
<link href="style.css" rel="stylesheet" type="text/css" /> 
<style type="text/css"> 
<!-- 
#thx { 
	font: 0.8em Helvetica, sans-serif; 
	background-color: #E6FFD9; 
	margin: 1em 0; 
} 
--> 
</style> 
</head> 
<body class="sidebar-right loading"> 
	 
<div id="content">  
  <div id="map-wrapper">  
    <div id="map"></div> 
  </div> 
  <div id="sidebar">  
    <div style="margin-left=10px;">  
      <script type="text/javascript"><!-- 
		google_ad_client = "pub-6444523573115879"; 
		/* 300x250, date de création 04/02/08 */ 
		google_ad_slot = "5680663383"; 
		google_ad_width = 300; 
		google_ad_height = 250; 
		//--> 
		</script> 
      <script type="text/javascript" 
		src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
		</script> 
    </div> 
    <div id="titre">Liste des magasins et activités</div> 
    <div id="thx">Si vous recopiez et utilisez cet exemple, merci de laisser apparent  
      le lien, situé tout en bas de cette liste, en signe d'encouragement ;-)  
      . </div> 
    <ul id="sidebar-list"> 
    </ul> 
  </div> 
</div> 
	 
<div id="alert">  
  <p>Chargement en cours ...</p> 
</div> 
</body>
</html>

Fichier JS : fonctions.js

Téléchargez le fichier : fonctions.js 

// JavaScript Document

var map;
var centerLatitude = 47.389285;
var centerLongitude = 0.689049; 
var startZoom = 9;
var xmlhttp;
var markers;
var highlightCircle;
var currentMarker;
var iconeVert = new GIcon();

iconeVert.image = "vert.png";
iconeVert.shadow = "ombre.png";
iconeVert.iconSize = new GSize(12, 20);
iconeVert.shadowSize = new GSize(22, 20);
iconeVert.iconAnchor = new GPoint(6, 20);
iconeVert.infoWindowAnchor = new GPoint(5, 1);

var deselectCurrent = function() {};

function initializePoint(pointData) {
	var point = new GLatLng(pointData.latitude, pointData.longitude);
	var marker = new GMarker(point,{icon: iconeVert, title: pointData.nom});
	var listItem = document.createElement('li');
	var listItemLink = listItem.appendChild(document.createElement('a'));
	listItemLink.href = "#";
	listItemLink.onmouseover = function() { marker.setImage("rouge.png");}
	listItemLink.onmouseout = function() { marker.setImage("vert.png");}
	listItemLink.innerHTML = '<strong>' + pointData.nom + ' </strong><span>' + pointData.codepostal + ', ' + pointData.ville + '</span>';
	var focusPoint = function() {
		deselectCurrent();
		listItem.className = 'current';
		marker.setImage("rouge.png");
		deselectCurrent = function() { listItem.className = ''; marker.setImage("vert.png");}
		marker.openInfoWindowHtml(pointData.nom);
		map.panTo(point);
		return false;
	}
	listItemLink.onclick = focusPoint;
	GEvent.addListener(marker, 'click', focusPoint);	
	GEvent.addListener(marker, 'mouseover', function() { marker.setImage("rouge.png"); });
	GEvent.addListener(marker, 'mouseout', function() { marker.setImage("vert.png"); });
	GEvent.addListener(marker, 'infowindowclose', function(){marker.setImage("vert.png");});	
	document.getElementById('sidebar-list').appendChild(listItem);
	map.addOverlay(marker);
}

function windowHeight() {
	// Standard browsers (Mozilla, Safari, etc.)
	if (self.innerHeight)
		return self.innerHeight;
	// IE 6
	if (document.documentElement && document.documentElement.clientHeight)
		return document.documentElement.clientHeight;
	// IE 5
	if (document.body)
		return document.body.clientHeight;
	// Just in case.
	return 0;
}

function handleResize() {
	var height = windowHeight()-20;
	document.getElementById('map').style.height = height + 'px';
	document.getElementById('sidebar').style.height = height + 'px';
}

function changeBodyClass(from, to) {
	document.body.className = document.body.className.replace(from, to);
	return false;
}

function setAlertText(str) {
	document.getElementById('alert').innerHTML = '<p>' + str + '</p>';
}

function initData() {
	map = new GMap(document.getElementById("map"),{mapTypes:[G_PHYSICAL_MAP,G_NORMAL_MAP,G_SATELLITE_MAP,G_HYBRID_MAP]});
	map.addControl(new GMapTypeControl());
	map.addControl(new GLargeMapControl());
	map.addControl(new GOverviewMapControl(new GSize(200,180)));
	map.setCenter(new GLatLng(centerLatitude, centerLongitude), startZoom);
	var bounds = new GLatLngBounds();
	for(id in markers) {
		initializePoint(markers[id]);
		bounds.extend(new GLatLng(markers[id].latitude, markers[id].longitude));
	}
	map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
	changeBodyClass('loading', 'standby');
	var divt = document.createElement('div');
	divt.style.margin = "0";
	divt.style.padding = "0";
	divt.style.textAlign = "center";
	divt.style.backgroundColor = "#FFF9DD";
	divt.style.borderTop = "1px solid #dddddd";
	divt.innerHTML = "";
	var linkt = divt.appendChild(document.createElement('a'));
	linkt.href = "http://www.touraineverte.com";
	linkt.innerHTML = "Aide documentation exemples tutoriels en Français sur l'API Google Maps : http://www.touraineverte.com";
	linkt.title = "Exemples et Tutoriels sur l'API Google Maps";
	linkt.style.textDecoration = "none";
	linkt.style.font = "0.8em Helvetica, sans-serif";
	linkt.style.color = "black";
	document.getElementById('sidebar').appendChild(divt);
}

function init() {
	handleResize();
	xmlhttp = GXmlHttp.create();
	xmlhttp.open('GET', 'json.php', true);
	xmlhttp.onreadystatechange = function() {
		if (xmlhttp.readyState == 4) {
       		if (xmlhttp.status != 200) 
       			setAlertText('Impossible d\'acéder aux données de la carte.');
       		else
       		{
				var responseText = xmlhttp.responseText;
				markers = eval(responseText);
				if (!markers)
					setAlertText('Erreur de données.');
				else
					initData();
			}
       }
    }
    xmlhttp.send(null);
}

window.onresize = handleResize;
window.onload = init;
window.onunload = GUnload;

 

Fichier CSS : style.css

Téléchargez le fichier : style.css 

/* CSS Document */

html { overflow: hidden; }

html, body {
     margin: 0;
     padding: 0;
     height: 100%;
}

body { margin: 10px; }

#content {
     margin-top: 10px;
     position: relative;
}

#map {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     border: 1px solid #aaa;
}

#map-wrapper {
     position: relative;
     height: 100%;
}

#sidebar {
     position: absolute;
     border: 1px solid #aaa;
     top: 0;
     width: 320px;
     height: 100%;
     overflow: auto;
}

#sidebar #titre {
	text-align: center;
	background: #FFF9DD;
	font: bold 1em "Helvetica", sans-serif;
}

h1{
	font: 1em Helvetica, sans-serif;
}

#sidebar ul#sidebar-list {
     list-style: url(puce.gif) none;
}

#sidebar ul#sidebar-list li a {
	display: block;
	font: 12px Helvetica, sans-serif;
	text-decoration: none;
	color: #000;
}

#sidebar ul#sidebar-list li a:hover {
     background: #FFE1E1;
     color: #000000;
}

#sidebar ul#sidebar-list li.current a {
     background: #E7FFCE;
     color: #000000;
}

#sidebar ul#sidebar-list li.current a:hover {
     background: #E7FFCE;
     color: #000000;
}

#sidebar ul#sidebar-list li a strong {
     display: block;
}
#sidebar ul#sidebar-list li a span {
     font-style: italic;
     font-size: 11px;
}

body.sidebar-right #map-wrapper { margin-right: 330px; }
body.sidebar-right #sidebar { right: 0; }

body.nosidebar #map-wrapper { margin: 0; }
body.nosidebar #sidebar { display: none; }

body.sidebar-right a#button-sidebar-show,
body.nosidebar a#button-sidebar-hide { display: none; }

#toolbar {
     background: white;
     padding: 4px;
     border: 1px solid black;
     position: relative;
}
/* holly hack for IE to get position:bottom right 
   see: http://www.positioniseverything.net/abs_relbugs.html
\*/

* html #toolbar { height: 1px; }
/* */

#toolbar h1 {
     margin: 0;
     font: bold 18px Helvetica, sans-serif;
}

#toolbar ul {
     list-style: none;
     padding: 0;
     margin: 0;
}

#toolbar ul#sidebar-controls {
	position: absolute;
	bottom: 5px;
	right: 5px;
}

#toolbar ul li {
     display: inline;
}

#toolbar ul li a {
     padding: 3px 6px;
     color: #444;
     text-decoration: none;
     font-size: 12px;
}

#toolbar ul li a:hover {
     color: #aaa;
     background: #444;
}

#alert {
     position: absolute;
     top: 50%;
     left: 0;
     width: 100%;
     text-align: center;   
     display: none;
}

#alert p {
     width: 180px;
     margin: 0 auto 0 auto;
     padding: 10px;
     background: #eee;
     border: 1px solid #fff;
}

body.loading #alert { display: block; }

Fichier PHP : connexionBD.php

Téléchargez le fichier : connexionBD.php 

<?
$username="username";
$password="password";
$serveur="nom-du-serveur";
$database="username-databaseName";
?>

Fichier PHP : json.php

Téléchargez le fichier : json.php

Voir le fichier JSON généré par json.php : json.php 

<?php
/* *********************** A T T E N T I O N *************************/
/* Veillez à indiquer le bon chemin vers votre fichier connexion.php */
require("../include/connexionBD.php");

/* Connexion au serveur MySQL */
$connection=mysql_connect ($serveur, $username, $password);
if (!$connection) {
  die("Impossible de se connecter au serveur : " . mysql_error());
}

/* SSélection de la base de données */
$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) {
  die ("Impossible d'utiliser la base de données : " . mysql_error());
}

$query = "SELECT * FROM lieux WHERE 1";
$result = mysql_query($query);
if (!$result) {die("Requète invalide. Erreur : " . mysql_error());}

$json = array("[");
$tab = "\t{";
while ($row = @mysql_fetch_assoc($result)){
	$json[] = $tab;
	$json[] = "\t\t'latitude': ".$row["latitude"].",";
	$json[] = "\t\t'longitude': ".$row["longitude"].",";
	$json[] = "\t\t'type': '".utf8_encode(addSlashes($row["type"]))."',";
	$json[] = "\t\t'nom': '".utf8_encode(addSlashes($row["nom"]))."',";
	$json[] = "\t\t'adresse': '".$row["adresse"]."',";
	$json[] = "\t\t'codepostal': '".$row["codepostal"]."',";
	$json[] = "\t\t'ville': '".utf8_encode(addSlashes($row["ville"]))."'";
	$json[] = "\t}";
	$tab = "\t\t,\t{";
}
$json[] = "];";
$jsonFinal = join("\n", $json);
echo $jsonFinal;
?>

Résultat final

Pour voir le résultat final cliquez ici : resultat-final.php

 

 

|  http://www.touraineverte.com  |  © 2008  |  fadamaps37arobasegmailpointcom