Gecoder custom map icons per listing

By Jesus - November 27, 2014 - edited: November 27, 2014

Hello,

Is it possible to display custom map icons per listing? if so.... thanks for pointing me to the right direction.

Jesus

By Chris - December 1, 2014

If you wanted to do this by adding an upload field to your section called 'marker_icon', here's one way of getting it into the Google Map code. This is the chunk of example code from the Geocoder's "multiple address" map example modified to use the aforementioned change. Changed code is highlighted:

<script type="text/javascript">
function initialize() {
  var mapCanvasId = 'map_canvas';
  var mapOptions  = { mapTypeId: google.maps.MapTypeId.ROADMAP };
  var map         = new google.maps.Map(document.getElementById(mapCanvasId), mapOptions);
  var bounds      = new google.maps.LatLngBounds();
  var infowindow  = new google.maps.InfoWindow();
<?php
foreach ($myRecords as $record) {
  if (!$record['latitude'] || !$record['longitude']) { continue; }
  $jsFunctionArgs = "{$record['latitude']}, {$record['longitude']}, {$record['num']}, '" .escapeJs($record['_link']). "', '" .escapeJs(@$record['marker_icon'][0]['urlPath']). "'";
  print "  _geocoder_addMarker($jsFunctionArgs);\n";
}
?>

  //
  function _geocoder_addMarker(latitude, longitude, recordNum, detailLink, markerIconUrl) {
    var latLng       = new google.maps.LatLng(latitude, longitude);
    var infowindowEl = document.getElementById('marker_infowindow_' + recordNum);
    var marker       = new google.maps.Marker({ map: map, position: latLng, icon: markerIconUrl });
    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);
}

</script>

Hope this helps!

All the best,
Chris