eZ Community » Forums » Extensions » Google Maps: List of Adresses
expandshrink

Google Maps: List of Adresses

Google Maps: List of Adresses

Sunday 09 December 2012 12:09:28 pm - 1 reply

Hi there,

I would like to create an overview map of adresses/coordinates, but i got lost with all the old and new Google Maps / Location solutions, that were done in the last years.

My idea is to have a folder with articles (or other objects) in it. Most (not all) of the child nodes will have a GMap Location attribute with an adress/coordinate.

In the folders template, i want to fetch all coordinates of all child nodes and display them on a Google Map using the current V3 Google Maps API.

The markers should display the usual "info bubble" with some more content (the name of the child node at least).

Before I try to code everything all over again, i'm wondering, if somebody has done something like this before and like to share this with me (and everybody else).

Thanks in advance.

Sunday 09 December 2012 3:02:30 pm

Hi,

I made that happy.gif Emoticon. I am using http://gmap3.net/ as JS library. It is Jquery plugin for Gmaps. I am using it for a long time and it works perfect for me.

this is javascript code in my template

 <script type="text/javascript">
 {literal}
 function createMap(element, markers, centar) {
  $(element).gmap3({
   map:{
    options:{
     center: centar,
     zoom: 14
    }
   },
   marker:{
    values: markers,
    options:{
     draggable: false
    },
    /*events:{
     mouseover: function(marker, event, context){
      var map = $(this).gmap3("get"),
       infowindow = $(this).gmap3({get:{name:"infowindow"}});
      if (infowindow){
       infowindow.open(map, marker);
       infowindow.setContent(context.data);
      } else {
       $(this).gmap3({
        infowindow:{
         anchor:marker,
         options:{content: context.data}
        }
       });
      }
     },
     mouseout: function(){
      var infowindow = $(this).gmap3({get:{name:"infowindow"}});
      if (infowindow){
       infowindow.close();
      }
     }
    }*/
 
    events:{
     click: function(marker, event, context){
      $(this).gmap3(
 
      {clear:"overlay"},
 
      {
       overlay:{
        latLng: marker.getPosition(),
        options:{
         content: '<div class="infobubble">' +
             '<div class="infobubble_head"><a href="/' + context.data.url + '">' + context.data.naziv + '</a></div>' +
             '<div class="infobubble_content"><img src="' + context.data.image + '" /></div>' +
             '<div class="infobubble_content"><span class="tbold">' + context.data.adresa + '</span><br/>' + context.data.telefon + '</div>' +
             '<div class="infobubble_content"><a class="red_button red_button_small map_button" href="/' + context.data.url + '">Saznaj više &rarr;</a></div>' +
             '<a class="infobubble_close" href="#" onclick="destroyBox($(this));">x</a>' +
            '</div>' +
            '<div class="infobubble_arrow"></div>',
         offset:{
          x:-260,
          y:-60
         }
        }
       }
      });
     },
     mouseout: function(){
      //$(this).gmap3({clear:"overlay"});
     }
    }
   }
  });
 
 }
 
 function destroyBox(obj){
  $(obj).parent().hide();
  $(obj).parent().next().hide();
 }
 
 $(function(){
 
 {/literal}
  {if eq( $node.class_identifier, 'lokacija_grad')}
   {set $currentLocation=$node }
  {else}
   {set $currentLocation=$lokacije[0] }
  {/if}
  {set $restorani=kfclokacijemapa($currentLocation.node_id) }
  createMap('#gmap_div', {$restorani}, [{$currentLocation.data_map.centar.content.latitude},{$currentLocation.data_map.centar.content.longitude}]);
  {set $restorani=false()}
  {set $latitude=false()}
  {set $longitude=false()}
 {literal}
 
 });
 {/literal}
</script>

I made template operator that returns Javascript array of location objects.

 <?php
 
class kfcLokacijeMapa {
  public $Operators;
 
 function __construct() {
  $this->Operators = array('kfclokacijemapa');
 }
 
 /** 
  * Returns the template operators.
  * @return array
  */  
 function operatorList() {
  return $this->Operators;
 }
 
 /**
  * Returns true to tell the template engine that the parameter list 
  * exists per operator type. 
  */  
 function namedParameterPerOperator() {
  return true;
 }
 
 /**
  * @see eZTemplateOperator::namedParameterList 
  **/ 
 function namedParameterList() {
  return array( 'kfclokacijemapa' => array( 'node_id' => array( 'type' => 'integer',
                     'required' => true,
                     'default' => '' )
                    ) 
        );
 }
 
 function modify( $tpl, $operatorName, $operatorParameters, &$rootNamespace, &$currentNamespace, &$operatorValue, &$namedParameters ) {
  $operatorValue = '[]';
  $nodes = array();
  if (!empty($namedParameters['node_id'])) {
   $nodes = eZFunctionHandler::execute( 'content', 'list', array( 'parent_node_id' => (int)$namedParameters['node_id']) );
   $markers = array();
   $points = array();
   foreach($nodes as $node) {
    $datamap = $node->ContentObject->fetchDataMap();
    $adresa = $datamap['adresa']->value();
    $telefon = $datamap['telefon']->value();
 
    $image = $datamap['image']->value()->attribute('restoran_mapa_info');
    $image = '/' . $image['url'];
 
    $latitude = str_replace(',', '.', $datamap['mapa']->value()->latitude);
    $longitude = str_replace(',', '.', $datamap['mapa']->value()->longitude);
    $points[] = array('latitude' => $latitude, 'longitude' => $longitude);
    $name = htmlspecialchars($node->attribute( 'name' ));
 
    $url = $node->attribute( 'url_alias' );
    $infowindow = <<<EOT
{'naziv' : '$name', 'adresa' : '$adresa', 'telefon' : '$telefon', 'slika' : '$slika', 'url' : '$url'}
EOT;
    $markers[] = <<<EOT
    {latLng:[$latitude, $longitude], data:$infowindow, options:{icon: "/extension/kfc/design/kfc/images/gmap_marker.png"}}
EOT;
   }
 
   if (count($markers) > 0) {
    $operatorValue = '[' . join(',', $markers) . ']';
   }
 
  }
 }
 
}

I display markers with custom icons and a little bit more data in info window; title, address, phone, image.

If you need any clarification about this code, be free to ask happy.gif Emoticon

Modified on Sunday 09 December 2012 3:14:47 pm by aleksandar ilic

expandshrink

You must be logged in to post messages in this topic!

36 542 Users on board!

Forums menu

Proudly Developed with from