jGmap : géolocalisation avec l'API Google Maps

PréRequis

1. Jelix 1.1.3 ou supérieur installé
2. Jquery (NB : intégré à jelix)

Fonctionnalités

1. Affichage par défaut prédéfini
2. Personnalisation de base (taille, couleur de fond)
3. Personnalisation de l'interface utilisateur (Déplacement, zoom, échelle ...)
4. Ajout de marqueur à partir des données géophysiques(lattitude, longitude)
5. Ajustement automatique du centre de carte et du niveau de zoom en fonction du nombre de marqueurs
6. Personnalisation des icones des marqueurs
7. Possibilité de mettre plusieurs cartes sur une même page avec personnalisation identique ou non

Fonctionnalités à venir

1. Geocoding (placement de marqueur à partir de l'adresse
2. Affichage des bulles d'info par marqueur
3. Mis en cache
4. Administration

Exemple

1. Ici : http://jgmap.manooweb.fr/exemple

Remerciements

A tous les contributeurs et staff Jelix pour l'aide apportée!
A Monte Ohrt pour sa classe php GoogleMapAPI.class.php dont je me suis fortement inspiré.
http://www.phpinsider.com/php/code/GoogleMapAPI/

Installation

0) Structure du répertoire jgmap

classes

1. jGmap.class.php : classe principale de ce module. Contient également d'autres classes nécessaires au fonctionnement interne(jGmapPoint, jGmapMarker ...)

install

1. themes : dossier contenant la feuille de style spécifique
2. jgmap.module.ini.php.dist : fichier de configuration (d'exemple) du module
3. js/class.js : fichier javascript permettant de simuler de l'héritage simple d'objet en javascript
4. INSTALL-1.2.0.html : ce fichier ;)
5. VERSION : la version de ce module

locales

1. en_EN : traductions anglaise du module
2. fr_FR : "V.O" du module ;)

templates

1. headerGoogleMap.tpl : javascript de chargement de l'API google maps
2. commonFunction.tpl : Javascript : définition d'une classe commune permettant la manipulation d'une carte
3. initMap.tpl : Javascript : d'initialisation et affichage de la carte. Lancer sur l'évènement ready de jQuery
4. mapZone.tpl : javascript de création du conteneur HTML qui va accueillir la carte

zones

1. map.zone.php : zone permettant l'affichage de la carte dans une page

autres

1. module.xml : fichier de définition du module au format jelix

1) Fichiers

• 1.1) Décompresser l'archive dans le dossier modules
• 1.2) Copier les dossiers "install/themes" dans le répertoire www de votre application

2) Paramétrage :

• 2.1) fichier defaultconfig.ini.php
• 2.1.1) Assurez vous que le module jGmap soit bien dans le modulePath (cf paramètre modulesPath dans var/config/defaultconfig.ini.php)
• 2.2) Facultatif : fichier exemple jgmap.module.ini.php.dist à recopier et renommer jgmap.module.ini.php dans le répertoire var/config de votre application

3) Développement :

• 3.1) Création d'une classe héritant de la classe jGmap. En effet, c'est dans le constructeur de celle-ci que vous allez pouvoir ajouter vos marqueurs. C'est aussi cette classe que vous allez passer en paramètre de la zone

  jClasses::inc('jgmap~jGmap');
  class maCarte extends jGmap{
      public function __construct(){
  		parent::__construct();
  		$this->addMarkerByCoords(46.98395,-1.23844);
  	}
  }    

• 3.2) ajout de la zone dans un de vos templates en passant au paramètre mapClass la classe précédemment créée.

  		{zone 'jgmap~map', array('mapClass'=>'monModule~maCarte')}
      

• 3.3) ajout de plusieurs marqueurs : il suffit de faire appel autant de fois que nécessaire à la méthode addMarkerByCoords

  class maCarte extends jGmap{
      public function __construct(){
  		parent::__construct();
  		$this->addMarkerByCoords(46.98395,-1.23844);
  		$this->addMarkerByCoords(46.9836,-1.23233);
  		$this->addMarkerByCoords(46.9871,-1.22665);
  	}
  }   

• 3.4) personnalisation de l'icône d'un marqueur : il suffit d'ajouter une icone par l'appel de la méthode addMarkerIcon() puis ensuite de passer son résultat (id) aux options du marqueur à créer (paramètre 'icon' dans le tableau associatif de la méthode addMarkerByCoords()).
  Seul le paramètre 'image' est nécessaire à la création de l'icône.

  class maCarte extends jGmap{
      public function __construct(){
          global $gJConfig;
  		parent::__construct();
          $iconId = $this->addMarkerIcon(array('image' =>  $gJConfig->urlengine['basePath'].'themes/default/images/icones/googlemap/monImage.png', 
                              'shadow' => $gJConfig->urlengine['basePath'].'themes/default/images/icones/googlemap/shadow/punaise.png',
                              'anchorX'=>8,
                              'anchorY'=>33,
                              'infoWindowAnchorX'=>20,
                              'infoWindowAnchorY'=>5
                              )
                       );
  		$this->addMarkerByCoords(46.98395,-1.23844,array('icon'=>$iconId));
  	}
  }