page-translate

Comment paramétrer et afficher une carte GMap dans un template de node Drupal ?

drupal / gmap / template / mise en page

Important: Nous venons de migrer d'un site Wordpress vers Drupal alors il se peut qu'il y ait des liens brisés, des images qui ne s'affichent pas ou encore du code mal formatté. Nous travaillons fort pour régler ces problèmes le plus tôt possible.

De nombreux articles expliquent comment ajouter une carte à un node grâce aux modules Location et GMap, puis comment l'afficher avec le module Views. Cet article ne traite pas de ce sujet.

Si vous utilisez les modules Locations et Gmap dans Drupal, il peut être difficile de maîtriser le rendu d'une carte lorsqu'on passe par les fichiers templates d'un thème. Voici donc deux méthodes pour afficher une carte depuis un fichier node--xxxxxx.tpl.php.

Vous pouvez afficher la structure des données à utiliser en affichant les valeurs du champ location:

print_r($node->location);

Résultat :

[location] => Array
(
  [lid] => 1
  [name] =>
  [street] => 9355 Boul. Leduc
  [additional] => #23
 [city] => Brossard
  [province] => QC
  [postal_code] => J4Y 0B3
  [country] => ca
  [latitude] => 45.450080
  [longitude] => -73.444683
  [source] => 1
  [is_primary] => 0
  [locpick] => Array
  (
    [user_latitude] => 45.450080
    [user_longitude] => -73.444683
  )
  [province_name] => Quebec
  [country_name] => Canada
)

La manière la plus simple d'afficher la carte est d'utiliser la méthode gmap_simple_map()

print gmap_simple_map(
  $node->location['latitude'],
  $node->location['longitude'],
  'big red',
  $marker,
  15,
  '340px',
  '500px',
  true
);

Big red étant le type de marqueur (Big red, Small red, Big blue, etc)
$marker le contenu HTML de la bulle affichée lorsqu'on clique sur le marqueur
340px la largeur de la carte
500px la hauteur de la carte
true ouvre automatiquement la bulle (remplacer par false si on ne le souhaite pas).

Cette méthode a l'avantage d'être simple à utiliser mais limite la personnalisation de la carte.

La deuxième méthode possible est theme('gmap', $map_array) mais ne fonctionne pas toujours. Aussi, il est possible d'utiliser le même principe que la méthode gmap_simple_map() pour afficher la carte :

Comment fonctionne la méthode gmap_simple_map() ?

function gmap_simple_map($latitude, $longitude, $markername = '', $info = '', $zoom = 'auto', $width = 'default', $height = 'default', $autoshow = FALSE, $map = array()) {
  $settings = array(
    'id' => gmap_get_auto_mapid(),
    'latitude' => $latitude,
    'longitude' => $longitude,
  );
  if ($zoom != 'default') {
    $settings['zoom'] = $zoom;
  }
  if ($width != 'default') {
    $settings['width'] = $width;
  }
  if ($height != 'default') {
    $settings['height'] = $height;
  }

  $settings['markers'] = array(array(
    'latitude' => $latitude,
    'longitude' => $longitude,
    'markername' => $markername,
    'offset' => 0,
  ));

  if (!empty($info)) {
    $settings['markers'][0]['text'] = $info;
  }

  if ($autoshow) {
    $settings['markers'][0]['autoclick'] = TRUE;
  }

  if (!empty($map)) {
    $settings = array_merge($settings, $map);
  }

  $element = array(
    '#type' => 'gmap',
    '#gmap_settings' => $settings,
  );
  return drupal_render($element);
}

On constate que les paramètres sont essentiellements réorganisés puis passés à la méthode drupal_render(). On peut donc simplement réutiliser les lignes 36 à 40 en modifiant la variable $settings en fonction du résultat voulu :

$settings = array(
  'id' => 'la-map',
  'width' => '500px',
  'height' => '300px',
  'latitude' => $location['latitude'] + 0.0025,
  'longitude' => $location['longitude'] + 0.0025,
  'maptype' => 'Map',
  'controltype' => 'Small',
  'zoom' => '15',
 
  'markers' => array(
    array(
      'latitude' => $location['latitude'],
      'longitude' => $location['longitude'],
      'text' => 'A simple test',
      'markername' => 'small red',
      'offset' => 1,
      'autoclick' => true,
    ),
   
  ),
 
  'behavior' => array(
    'locpick' => FALSE,
    'nodrag' => FALSE,
    'nokeyboard' => TRUE,
    'overview' => TRUE,
    'scale' => TRUE,
   ),    
);

$gmap = array(
  '#type' => 'gmap',
  '#gmap_settings' => $settings
);
       
print drupal_render($gmap);      

En utilisant cette méthode, vous pouvez afficher plusieurs marqueurs, choisir le type de contrôles (Micro, Small, Large) et le type de carte (Map, Satellite, Hybrid, Terrain), bloquer le zoom et le déplacement (behavior), décaler le centre de la carte par rapport au marqueur, ...

Ce procédé est documenté dans l'aide du module GMap

Si vous souhaitez dessiner des polygones, voici la structure à respecter pour $settings['shapes'] :

'shapes' => array(
  array(
  'type' => "polygon",
    'style' => array("000000", 3, 25, "ffff00", 45),
    'points' => array(
      array(43.667871610117494,-70.675048828125),
      array(43.43696596521823,-70.0927734375),
      array(43.9058083561574,-69.202880859375),
      array(44.512176171071054,-69.796142578125),
      array(43.667871610117494,-70.675048828125),
    ),
    array(
      'type' => "circle",
      'style' => array("000000", 3, 25, "ffff00", 45),
      'radius' => 0.7622248729082767,
      'center' => array(39.3739522204, -81.5681648254),
    ),
),

Si vous souhaitez aller plus loin, je vous invite à consulter la documentation sur la configuration de la carte et les réglages possibles.

Ajouter un commentaire

CAPTCHA
Êtes-vous un robot ?
Image CAPTCHA
Écrivez le code apparaissant dans l'image.

Derniers articles