Google Maps + OverlappingMarkerSpiderfier custom marker not working

0
votes

Im trying to create a map that contains markers with different colors;

Red: http://maps.google.com/mapfiles/ms/icons/red-dot.png Yellow: http://maps.google.com/mapfiles/ms/icons/yellow-dot.png

As you can see bellow, I used the Google Maps API and the OverlappingMarkerSpiderfier (because I've some markers that are setted at the same point), but all the markers are red (with the standart icon marker, not my custom )

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset="UTF-8" /> 
  <title>My test</title> 
  <script src="http://maps.google.com/maps/api/js?sensor=false" 
          type="text/javascript"></script> <script src="http://jawj.github.io/OverlappingMarkerSpiderfier/bin/oms.min.js"></script>
</head>  <style type="text/css">
html, body { height:100%; width:100%;}
</style><body>
<div id="map" style="width:100%; height:100%;"></div>
</body> 
  <script type="text/javascript"> 

     var locations = [
        ['test', -27.23, -52.02,1,"http://maps.google.com/mapfiles/ms/icons/red-dot.png"],
        ['test', -15.79, -47.88,10,"http://maps.google.com/mapfiles/ms/icons/yellow-dot.png"],
        ['test', -3.73, -38.52,11,"http://maps.google.com/mapfiles/ms/icons/yellow-dot.png"]
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 3,
      panControl:false,
      zoomControl:true,
      mapTypeControl:false,
      scaleControl:false,
      streetViewControl:false,
      overviewMapControl:false,
      rotateControl:false,
      center: new google.maps.LatLng(20.5, 15.6),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var oms = new OverlappingMarkerSpiderfier(map,
        {markersWontMove: true, markersWontHide: true,keepSpiderfied : true});
  var iw = new google.maps.InfoWindow();                                                                                                          
  oms.addListener('click', function(marker, event) {
  iw.setContent(marker.desc);
  iw.open(map, marker);
});
oms.addListener('spiderfy', function(markers) {
  iw.close();
});                                                                                                                                                             
oms.addListener('unspiderfy', function(markers) {       });                 

   var marker, i;
  for (var i = 0; i < locations.length; i ++) {
  var datum = locations[i][0];
  var loc = new  google.maps.LatLng(locations[i][1], locations[i][2]);
  var marker = new  google.maps.Marker({
    position: loc,
    title: datum,
    map: map,
    icon: locations[i][3]
  });
  marker.desc = datum;
  oms.addMarker(marker);
}   
</script>
</body>
</html>

Does anyone know why this is not working or where I went wrong?

Thanks in advance!

1
javascriptgoogle-maps

1 Answers

1
votes

Sorry for that guys, the problem was the number informed in the icon. It was 4 and not 3.

var marker = new  google.maps.Marker({
    position: loc,
    title: datum,
    map: map,
    icon: locations[i][4]
  });