Geo Code Multi Listing Icon

By KCMedia - September 14, 2014

Hi guys i have a multi map layout working perfect and displaying all the listings and locations but i cant replace the stock pin marker with a custom marker where do you put it into the code.

I have tried the normal way that you do for a single listing but dosnt work.

Thanks



Craig

KC Media Solutions

www.kcmedia.biz

By claire - September 18, 2014

Hi Craig - sorry but I don't know if we can help without seeing the code.

I assume you're using the Google Maps API? Have you looked at the custom marker documentation?

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 KCMedia - September 19, 2014

Hi Claire

i am just using the normal geocode plugin i cant get the single map to display with icon but not a map with more than one location pin on the map to display the pin icons

here is the code i have.

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
  var mapCanvasId = 'map-canvas';
  var mapOptions  = { mapTypeId: google.maps.MapTypeId.ROADMAP, scrollwheel: false, navigationControl: false, mapTypeControl: false, scaleControl: false, draggable: true };
  var map         = new google.maps.Map(document.getElementById(mapCanvasId), mapOptions);
  var image       = new google.maps.MarkerImage("img/map-icon.png");
  var bounds      = new google.maps.LatLngBounds();
  var infowindow  = new google.maps.InfoWindow();
<?php
foreach ($locations as $record) {
  if (!$record['latitude'] || !$record['longitude']) { continue; }
  $jsFunctionArgs = "{$record['latitude']}, {$record['longitude']}, {$record['num']}, '" .escapeJs($record['_link']). "'";
  print "  _geocoder_addMarker($jsFunctionArgs);\n";
}
?>

  //
  function _geocoder_addMarker(latitude, longitude, recordNum, detailLink) {
    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: image });
    var image        = "img/map-icon.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);
}

</script>

Thanks



Craig

KC Media Solutions

www.kcmedia.biz

By claire - September 24, 2014

Hi Craig

Can you be any more specific about what error you're seeing? Do the icons not load, for example?

I suspect that you will need to include the full root in order to have it show up, i.e. http://mywebsite.com/img/map-icon.png instead of img/map-icon.png.

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

Claire Ryan
interactivetools.com

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

By KCMedia - September 24, 2014

Hi Claire

mmm have never needed to do that before every other single time it has worked as per what I have on every other single install why would it change all of a sudden and the other sites are still working ok

Thanks



Craig

KC Media Solutions

www.kcmedia.biz

By claire - September 24, 2014

Hi Craig

I can't really tell, honestly. The code looks fine. Are you sure you're not getting any errors in the browser console? Anything that might indicate what's wrong? Is it possible that no markers are being loaded on to the map?

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

Claire Ryan
interactivetools.com

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

By KCMedia - September 24, 2014

Hi Claire

no errors loading and the standard map pin icons are loading perfect 

Thanks



Craig

KC Media Solutions

www.kcmedia.biz