Google지도 API의 마커 배열로 고생

Question

내 Google지도에 대해 내 마커를 개별적으로 나열하기 시작했지만 은 비효율적이었습니다. 마커를 맵에 놓으려는 배열을 만들려고했지만 아무 것도 보이지 않습니다. 어디서 잘못 볼 수 있습니까?

function initialize() { 
     var latlng = new google.maps.LatLng(52.474, -1.868); 

     var myOptions = { 
      zoom: 11, 
      center: latlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 

     var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
     var image = 'i/hotel-map-pin.png'; 

     var hotels = [ 
      ['ibis Birmingham Airport', 52.452656, -1.730548, 4], 
      ['ETAP Birmingham Airport', 52.452527, -1.731644, 3], 
      ['ibis Birmingham City Centre', 52.475162, -1.897208, 2] 
     ]; 

     for (var i = 0; i < hotels.length; i++) { 
      var marker = new google.maps.Marker({ 
       position: hotels[1], 
       map: map, 
       icon: image, 
       title: hotels[0], 
       zIndex: hotels[2] 
      }); 
     } 
    } 

감사합니다.

Answer 1

(1, 0 & 2) 오히려 내가 인덱스 배열 요소에 비해 : 수정과

for (var i = 0; i < hotels.length; i++) { 
     var hotel = hotels [i] 
     var marker = new google.maps.Marker({ 
      position: new google.maps.LatLng (hotel[1], hotel[2]), 
      map: map, 
      icon: image, 
      title: hotel[0], 
      zIndex: hotel[3] 
     }); 
    } 

Here가 작동 예입니다 .

Answer 2

다음은 올바르게 호텔 배열에 접근하지 않는 모두의 JSFiddle Demo:

우선입니다. 제목이 hotels[i][1] 인 경우 hotels[i][0]이고 위도 및 lng가 hotels[i][2]이고 z- 색인의 경우 hotels[i][3]이어야합니다. 두 번째로 position은 lat와 lng가 param 인 google.maps.LatLng 객체를 사용합니다. 루프는 고정 된 인덱스에있는 호텔 배열에 액세스에서

function initialize() { 
    var latlng = new google.maps.LatLng(52.474, -1.868); 

    var myOptions = { 
     zoom: 11, 
     center: latlng, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
    var image = 'i/hotel-map-pin.png'; 

    var hotels = [ 
     ['ibis Birmingham Airport', 52.452656, -1.730548, 4], 
     ['ETAP Birmingham Airport', 52.452527, -1.731644, 3], 
     ['ibis Birmingham City Centre', 52.475162, -1.897208, 2] 
     ]; 

    for (var i = 0; i < hotels.length; i++) { 
     var marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(hotels[i][1], hotels[i][2]), 
      map: map, 
      // icon: image, 
      title: hotels[i][0], 
      zIndex: hotels[i][3] 
     }); 
    } 
} 

window.onload = initialize;