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