マップにマップが追加されていません

Question

私はクロージャを使用して複数のマップマーカーを作成しようとしていますが、いずれのマーカーもマップに追加されていません。幸運にも何時間も捜し求めましたが、コンソールでエラーが検出されず、間違ったことは何も見えません。任意の助けをいただければ幸いです、ここに私のコードは次のとおりです。

 var locations = [ 
     [53.471809, -2.242170, "content1", 'img1.jpg'], 
     [53.466407, -2.234769, "content2", 'img2.jpg], 
     [53.477134, -2.255313, "content3", 'img3.jpg'], 
     [53.462775, -2.291624, "content4", 'img5.jpg'] 
     ]; 
     var latLong = new google.maps.LatLng(53.47203,-2.2386741); 

     function initialise() { 

     var mapOptions={ 
     center: latLong, 
     zoom: 16 
    } 
    var mapContainer=document.getElementById("mapArea"); 
    var map=new google.maps.Map(mapContainer, mapOptions); 



    function setMarkers(map,locations){ 

     var marker, i; 

     for (i = 0; i < locations.length; i++) 
     { 

     var lat = locations[i][0]; 
     var long = locations[i][1]; 
     var add = locations[i][2]; 
     var img = locations[i][3]; 

     latlngset = new google.maps.LatLng(lat, long); 

     var marker = new google.maps.Marker({ 
       map: map, position: latlngset,icon:img 
       }); 
     map.setCenter(marker.getPosition()); 


     var content = add; 

     var infowindow = new google.maps.InfoWindow(); 
     marker.setMap(map); 

     google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){ 
     return function() { 
      infowindow.setContent(content); 
      infowindow.open(map,marker); 
     }; 
    })(marker,content,infowindow)); 

     } 
    } 
    setMarkers(); 
} 
window.addEventListener('load',initialise); 

Answer 1

1. あなたはsetMarkers関数を呼び出す必要があります。
2. アイコン画像のフルパスが必要です。

proof of concept fiddle

コードスニペット：

var locations = [ 
 
    [53.471809, -2.242170, "content1", 'http://maps.google.com/mapfiles/ms/micons/blue.png'], 
 
    [53.466407, -2.234769, "content2", 'http://maps.google.com/mapfiles/ms/micons/green.png'], 
 
    [53.477134, -2.255313, "content3", 'http://maps.google.com/mapfiles/ms/micons/orange.png'], 
 
    [53.462775, -2.291624, "content4", 'http://maps.google.com/mapfiles/ms/micons/yellow.png'] 
 
]; 
 
var latLong = new google.maps.LatLng(53.47203, -2.2386741); 
 

 
function initialise() { 
 

 
    var mapOptions = { 
 
    center: latLong, 
 
    zoom: 11 
 
    } 
 
    var mapContainer = document.getElementById("mapArea"); 
 
    var map = new google.maps.Map(mapContainer, mapOptions); 
 
    setMarkers(map, locations); 
 

 

 
    function setMarkers(map, locations) { 
 

 
    var marker, i; 
 

 
    for (i = 0; i < locations.length; i++) { 
 

 
     var lat = locations[i][0]; 
 
     var long = locations[i][1]; 
 
     var add = locations[i][2]; 
 
     var img = locations[i][3]; 
 

 
     latlngset = new google.maps.LatLng(lat, long); 
 

 
     var marker = new google.maps.Marker({ 
 
     map: map, 
 
     position: latlngset, 
 
     icon: img 
 
     }); 
 
     map.setCenter(marker.getPosition()); 
 

 

 
     var content = add; 
 

 
     var infowindow = new google.maps.InfoWindow(); 
 
     marker.setMap(map); 
 

 
     google.maps.event.addListener(marker, 'click', (function(marker, content, infowindow) { 
 
     return function() { 
 
      infowindow.setContent(content); 
 
      infowindow.open(map, marker); 
 
     }; 
 
     })(marker, content, infowindow)); 
 

 
    } 
 
    } 
 
} 
 
window.addEventListener('load', initialise);

html, 
 
body, 
 
#mapArea { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="mapArea"></div>