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 claire - December 1, 2014

Hi there

This doesn't really involve the geocoder plugin - it depends on how you're displaying the coordinates on the front end. For example, if you're using Google Maps, you should refer to this link to implement custom markers on a front end map.

https://developers.google.com/maps/tutorials/customizing/custom-markers

--------------------

Claire Ryan
interactivetools.com

Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

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