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 gkornbluth - December 15, 2018 - edited: December 15, 2018

Hi Deborah,

As to the pricing. It's basically to protect google against high volume users.

Look at the "$200 monthly credit Equivalent free usage" column.

If the way your Geocoder was set up, all your client's visitors ever used was dynamic maps, your client would not be charges anything until their visitors accessed dynamic maps more than 28000 times in any month. If they accessed them 29000 times then they would be billed $7.00.

The pop up window can display an image, along with other information.(screen shot attached)

Here's an example that uses multiple custom fields including an image:

<div id="marker_infowindow_<?php echo $record['num']; ?>">
<h3><?php foreach ($record['profile_image'] as $index => $upload): ?><img src="<?php echo htmlencode($upload['thumbUrlPath']) ?>" width="<?php echo $upload['thumbWidth'] ?>" height="<?php echo $upload['thumbHeight'] ?>" alt="" /><?php endforeach ?><br /><?php echo htmlencode( @$record['practice_name']); ?><br /><?php echo htmlencode( @$record['practice_street_address']); ?><br />
<?php echo htmlencode( @$record['practice_city']); ?>, <?php echo htmlencode( @$record['practice_state']); ?> <?php echo htmlencode( @$record['practice_zip']); ?></h3>
<a href="<?php echo $record['_link']; ?>"><span class="text_font">Learn About This Provider</span></a> </div>
<?php endif ?><?php endforeach ?>

As to the colors, I look forward to the answer.

Hope that helps,

Jerry Kornbluth

The first CMS Builder reference book is now available on-line!
Take advantage of a free 3 month trial subscription, only for CMSB users, at: http://www.thecmsbcookbook.com/trial.php

Pop Up With Image.jpg 28K

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:

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.open(map, marker);
      else {
        window.location = detailLink;

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!


PHP Programmer

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

~ Deborah