Re: pre-sale GeoCoder plugin questions

5 posts by 2 authors in: Forums > CMS Builder: Plugins & Add-ons
Last Post: July 25, 2019   (RSS)

By mbareara - July 22, 2019

In response to: https://www.interactivetools.com/forum/forum-posts.php?postNum=2242776#post2242776

Hi Daniel, 

and if i have results on map from two different tables (or more of course), for example Bar, Brewery, Restaurants, how could  i have different markers for each result?

Thank you in advance for your answer

Orazio 

By daniel - July 24, 2019

Hi Orazio,

Yes, that should definitely be possible. If you're following my example from the other thread, the category that gets passed through can essentially be any value that matches up to the icon name. So you could do something like this instead:

<?php
foreach ($myBarRecords as $record) {
  if (!$record['latitude'] || !$record['longitude']) { continue; }
  $jsFunctionArgs = "{$record['latitude']}, {$record['longitude']}, {$record['num']}, '" .jsEncode($record['_link']). "', 'bar'";
  print "  _geocoder_addMarker($jsFunctionArgs);\n";
}
?>

This would then load these records using the icon filename "icon_category_bar.png", and the loop could be repeated for additional tables.

Let me know if you have any questions!

Thanks,

Daniel
Technical Lead
interactivetools.com

By mbareara - July 24, 2019

hi dave thank you for your answer. 

Just a question

I have this code but how can i modify this part of code to set different icons for different table (restaurant and bar?)

  //
  function _geocoder_addMarker(latitude, longitude, recordNum, detailLink, category) {
    var latLng       = new google.maps.LatLng(latitude, longitude);
    var infowindowEl = document.getElementById('marker_infowindow_' + recordNum);
    var iconPath     = 'http://example.com/map/icon/';
    var marker       = new google.maps.Marker({ map: map, position: latLng, icon: iconPath + 'icon_category_' + 'bar' + '.png' });
    google.maps.event.addListener(marker, 'click', function() {
      if (infowindowEl) {
        infowindow.setContent(infowindowEl.innerHTML);
        infowindow.open(map, marker);
      }
      else {
        window.location = detailLink;
      }
    });
    bounds.extend(latLng);
  }

  //
  map.fitBounds(bounds);
}

By daniel - July 25, 2019

Hi Orazio,

For the JavaScript portion of the code, you should not need to change that from my example in the previous thread. We use the PHP loop to pass in the different parameters, and we want "category" to be used to determine the different icon filenames. It should look like this:

  function _geocoder_addMarker(latitude, longitude, recordNum, detailLink, category) {
    var latLng       = new google.maps.LatLng(latitude, longitude);
    var infowindowEl = document.getElementById('marker_infowindow_' + recordNum);
    var iconPath     = 'http://example.com/path/to/icon/';
    var marker       = new google.maps.Marker({ map: map, position: latLng, icon: iconPath + 'icon_category_' + category + '.png' });
    google.maps.event.addListener(marker, 'click', function() {
      if (infowindowEl) {
        infowindow.setContent(infowindowEl.innerHTML);
        infowindow.open(map, marker);
      }
      else {
        window.location = detailLink;
      }
    });
    bounds.extend(latLng);
  }

You will set the different icon names using this line of the PHP loop I posted above:

$jsFunctionArgs = "{$record['latitude']}, {$record['longitude']}, {$record['num']}, '" .jsEncode($record['_link']). "', 'bar'";

The last portion of this line - 'bar' - gets passed into _geocoder_addMarker() as the "category" parameter. So each time you duplicate this loop for the different tables, you can simply change "bar" as needed and that new value will be used in the icon name. E.g. if you change it to "restaurant" then the icon filename used will be "icon_category_restaurant.png"

I hope that makes things more clear for you - let me know if you have any further questions!

Thanks,

Daniel
Technical Lead
interactivetools.com