2015-10-02 3 views
0

Im пытается создать карту, содержащую маркеры разных цветов;Карт Google Maps + OverlappingMarkerSpiderfier не работает

Красный: http://maps.google.com/mapfiles/ms/icons/red-dot.png Желтый: http://maps.google.com/mapfiles/ms/icons/yellow-dot.png

Как вы можете видеть ниже, я использовал API Карт Google и OverlappingMarkerSpiderfier (потому что я некоторые маркеры, которые выставиться в той же точке), но все маркеры красные (с стандартного значка маркера, а не мой пользовательский)

<!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> 

кто-нибудь знает, почему это не работает или там, где я пошло не так?

Заранее благодарен!

ответ

1

Извините за это, проблема была указана в значке. Это было 4, а не 3.

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

Отметить свой вопрос как решение. –

Смежные вопросы