Hi. This question is directed to Interactive Tools, but if anyone else knows the answers, I welcome your input.

I viewed Chris' video on the plugins page and understand the basic implementation, but have questions:

1) Is it possible to present a multi-address map with a variety of pin colors (aka layers) based on category selection? For example:
- Category A pins are red
- Category B pins are blue
- Category C pins are yellow

2) Can a popup (infoWindow) display an image (uploaded in CMSB) for each address?

3) I'm baffled by the Google Maps Platform pricing (https://cloud.google.com/maps-platform/pricing/sheet/). Do most projects fit in the Google aps "$200 MONTHLY CREDIT EQUIVALENT FREE USAGE"?

~ Deborah

By daniel - December 17, 2018

Hi Deborah,

1) Google Maps does not natively support different colour markers, but it is possible to modify the markers with some custom code (Google docs: https://developers.google.com/maps/documentation/javascript/custom-markers). In the past I've used this free set of coloured pins: http://www.benjaminkeen.com/google-maps-coloured-markers/. You'll need to save the icons you want to use in a directory accessible by the website.

The map code will need to be modified in a few places. Using "sample_map_multi.php" as an example, first we need to update the PHP foreach() loop to pass along the record's category, which would look something like this:

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

The name of the field ($record['category']) will need to be changed for your record's category field. Also, note that this will only work with a single-select list field.

Next, the _geocode_addMarker() function will need to be modified to use the icon, something like:

  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'll need to modify the iconPath variable to match where your icons are, and rename the icon files themselves to correspond with what is being generated by the script. In this example, assuming that the category is stored in the record as a num, the filenames would look something like "icon_category_1.png", "icon_category_2.png", etc. When testing this code out, it's helpful to open the developer console (F12) to see any 404 errors in the case that the icon path or filenames aren't matching correctly.

2) Try out Jerry's code and let us know if you have any trouble.

3) While it depends on the particulars of the project, the "average" site using a free map plugin is probably going to fit within the $200 credit. As Jerry mentioned, you can load ~28,000 dynamic maps per month, which is close to 1000 per day. Sites getting under 500 hits/day are almost definitely under that limit unless they use maps quite heavily. (Note: if you also use address geocoding, your limits will be lower. Geocoding requests cost $5 per 1000). If you're at all concerned about exceeding the $200 credit, there are tools within the Google Maps Platform that let you A) define budget alerts to let you know when you've spent pre-set amounts (https://cloud.google.com/billing/docs/how-to/budgets), and B) set hard limits on your API usage (https://cloud.google.com/apis/docs/capping-api-usage).

Let me know any questions!

Thanks,

Daniel
PHP Programmer
interactivetools.com

Jerry, thanks so much for the info and screenshot example with the image. That's excellent!

~ Deborah

Daniel, I appreciate your detailed response.

I'll save your suggestions and instructions for use if the project comes through. Hope it does, because I'd love to have a chance at using the GeoCoder plugin!

~ Deborah