Tutorial googleMap en php, regrouper des marqueurs par catégories

> Tutorial googleMap en php, regrouper des marqueurs par catégories

Comment ajouter des marqueurs sur une carte, organisés en catégorie, avec des contrôles pour afficher ou masquer une ou des catégories. Chaque catégorie aura une couleur différente. On progresse !

Pour cela, j'utilise la classe http://www.phpinsider.com/php/code/GoogleMapAPI/ que j'ai modifiée en m'inspirant du tutoriel http://econym.org.uk/gmap/categories.htm et de son exemple http://econym.org.uk/gmap/example_categories.htm

La classe php modifiée se trouve ici : http://www.cylman.com/tempo/GoogleMapAPI-Category.class.zip

Exemple de code :

<?
require('include/GoogleMapAPI-Category.class.php');
$map = new GoogleMapAPI('map');
$map->setAPIKey('VOTREAPIKEY');
$map->setZoomLevel(10);

// vous pouvez faire une requête et entrer en boucle :
// spécifier des images particulieres pour cette premiere catégorie
$map->addMarkerIcon('http://VOTRESITE/images/gmap/mm_20_green.png', 'httpVOTRESITE/images/gmap/mm_20_shadow.png',0,0,10,10);
$map->addMarkerByCoords(VOTRELONGITUDE,VOTRELATITUDE,'test',array('Nom'=>'<br><b>Texte</b><br>',"Onglet2"=>'<br>blabla'),'categorie1');

// spécifier des images particulieres pour cette seconde catégorie
$map->addMarkerIcon('http://VOTRESITE/images/gmap/mm_20_red.png', 'httpVOTRESITE/images/gmap/mm_20_shadow.png',0,0,10,10);
$map->addMarkerByCoords(VOTRELONGITUDE2,VOTRELATITUDE2,'test2',array('Nom'=>'<br><b>Texte2</b><br>',"Onglet2"=>'<br>blabla'),'categorie2');

$map->setMapType("map");
$map->disableDirections();
$map->enableZoomEncompass();
$map->enableOverviewControl();
$map->setHeight("450");
$map->setWidth("450");

$map->setCatShow('categorie1');
$map->setCatHide('categorie2');

?>

Le fichier html :

<!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" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<?php $map->printHeaderJS(); ?>
<?php $map->printMapJS(); ?>
<link rel="stylesheet" type="text/css" href="styles.css" media="all"/>
</head>

<body onload="onLoad()" >
<?php $map->printMap(); ?>
<br>
<form action="#">
<img src="images/gmap/mm_20_green.png" width="12" height="20" alt="" border="0" align="absmiddle"> Première catégorie<input type="checkbox" id="hotelbox" onclick="boxclick(this,'categorie1')" />   
   <img src="images/gmap/mm_20_red.png" width="12" height="20" alt="" border="0" align="absmiddle"> Seconde catégorie: <input type="checkbox" id="stationbox" onclick="boxclick(this,'categorie2')" /><br />
</form><br><br><br>
<?php $map->printSidebar();?>
</body>
</html>

Et dans le fichier css styles.css :

body {
font-family: Tahoma, Verdana sans-serif;
font-size: 12px;
margin: 0;
padding: 0;
background: #FFFFFF;
color: #666666;
}

v:* {
behavior:url(#default#VML);
}

/*pour les infobulles de la carte*/
#gmapmarker {
font: normal small verdana, arial, helvetica, sans-serif;
font-size: 10pt;
margin: 0px;
width: 250px;
height: 100px;
overflow:auto;
}

#map {
float : left;
}

retour