a
     
 
       
   Developpeur web    
       
   Php Mysql et divers    
       
   Shitao    
   Sénèque    
   Recettes    
       


> 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')" /> &nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;<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

  Tags : googlemap


> Obtenir la lattitude et la longitude googlemap d'une adresse en php
> Autres tutoriels sur googlemap
> Dépasser la limite des 15000 géolocalisations par jour sur googlemap
> Tutorial googleMap en php, liste d'adresse sur une carte
> Géocoder une adresse en php, obtenir sa latitude et sa longitude
> Eviter le statut google OVER_QUERY_LIMIT et dépasser la limite des 2500 géolocalisations par jour
Cylman
  Tags : googlemap


> Obtenir la lattitude et la longitude googlemap d'une adresse en php
> Autres tutoriels sur googlemap
> Dépasser la limite des 15000 géolocalisations par jour sur googlemap
> Tutorial googleMap en php, liste d'adresse sur une carte
> Géocoder une adresse en php, obtenir sa latitude et sa longitude
> Eviter le statut google OVER_QUERY_LIMIT et dépasser la limite des 2500 géolocalisations par jour



RSS    |    Mes liens    |    Syndication    |    Plan    |    Sitemap XML    |    Création de site web à Carcassonne