맞춤 설정 및 번호 매기기 아이콘 + Google지도 API 창이있는 정보창

Question

먼저이 기능이 새로 도입되었으며 Javascript 지식이 많지 않습니다. 웹 사이트를 만들어야하지만 다른 사람에게 내게 돈을 지불 할 여유가 없습니다!

빌드하려고하는 것은 내가 만든 여러 마커를 찾을 수있는지도입니다. 그들은 20KB를 넘지 않는 .png 파일입니다. 이미지/숫자/내 내 서버에로드했습니다. 그들은 다음과 같이 :

내가 아마 50 개 이상이 필요합니다, 하나 하나에도 자신의 정보창으로.

이

내가 편집을 시도하는 예이지만,이 일을 만들 수 없습니다 :

여기

https://developers.google.com/maps/documentation/javascript/tutorials/custom-markers?hl=es

자바 스크립트 코드 내가 지금까지 가지고 :

 var map; 
    function initialize() { 
     map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 12, 
     center: new google.maps.LatLng(41.388426, 2.171339), 
     mapTypeId: 'roadmap' 

    }); 

    var iconBase = 'images/numbers/'; 
    var icons = { 
     001: { 
     icon: iconBase + '001.png' 
     }, 
     002: { 
     icon: iconBase + '002.png' 
     } 
    }; 

    function addMarker(feature) { 
     var marker = new google.maps.Marker({ 
     position: feature.position, 
     icon: icons[feature.type].icon, 
     map: map 
     }); 
    } 

    var features = [ 
     { 
     position: new google.maps.LatLng(41.388426, 2.171339), 
     type: '001' 
     }, { 
     position: new google.maps.LatLng(41.387815, 2.139496), 
     type: '002' 
     } 
    ]; 

    for (var i = 0, feature; feature = features[i]; i++) { 
     addMarker(feature); 
    } 
    } 

당신이 도움이 될 수 있습니다 희망 ! 감사합니다.

Answer 1

내가 볼 수있는 주된 문제는 귀하의 for 루프에 있습니다.

이로 교체하십시오 : @MrUpsidown이 코멘트에 언급 한 것처럼

for (var i = 0, i<features.length; i++) { 
    addMarker(features[i]); 
} 

그런 다음, 당신은 icons 배열에 제대로 객체를 정의해야합니다.

var icons = { 
    '001': { 
    icon: iconBase + '001.png' 
    }, 
    '002': { 
    icon: iconBase + '002.png' 
    } 
}; 

features에서이 문자열로 정의되기 때문에,이 icons에서 동일해야한다.

나머지는 괜찮습니다.