레이블이있는 마커가 표시되지 않습니다.

Question

markerwithlabel.js 패키지 (http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.9/)를 사용하여 내 마커에 레이블을 첨부하고 싶습니다. 문서 헤더에 패키지 링크를 추가하고 addMarker 함수에 레이블 속성을 추가했습니다. 레이블 속성을 추가하기 전에 모든 것이 작동했기 때문에 레이블이 표시되지 않는 이유는 알 수 없습니다. 내가 놓친 게 있니? 헤더에서

:

여기

 <script src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.9/src/markerwithlabel.js" type="text/javascript"></script> 

나는 마커를 만들 :

//iterate through marker data and assign values to variables 
      for (i = 0; i < markerData.length; i++) { 
       var pos = new google.maps.LatLng(markerData[i][1], markerData[i][2]); 
       var title = markerData[i][0]; 
       var category = markerData[i][3]; 
       var new_marker = addMarker(pos, title, category); 
       arrMarkers.push(new_marker); 
       new_marker.setVisible(false); 
      } 

      //create marker based on the variables 
      function addMarker (pos, title, category) { 
       var marker = new google.maps.MarkerWithLabel({ 
        map: map, 
        position: pos, 
        icon: "mapIcons/marker_"+markerData[i][4]+".png", 
        category: category, 
        labelContent: "test", 
        labelAnchor: new google.maps.Point(22, 0), 
        labelClass: "labels", // the CSS class for the label 
        labelStyle: {opacity: 0.75}, 


       }); 

       infoBubble = new InfoBubble({ 
        maxWidth: 300, 
        borderRadius: 10, 
        borderWidth: 1, 
        borderColor: '#2c2c2c', 
        shadowStyle: 1 
       }); 

       var infoWindow = new google.maps.InfoWindow; 
       var info = 'Functie: ' + '<b>' + markerData[i][0] + "</b>" + '<br>' + 'Eigenschappen: ' + '<b>' + markerData[i][6] + "</b>" ; //html inside InfoWindow 
       //var video = "<div>" + '<iframe width="420" height="315" src="//www.youtube.com/embed/4gMH0V4L4A4">' + '</iframe>' + "</div>"; //html inside InfoWindow 
       var video = '<iframe title="YouTube video player" class="youtube-player" type="text/html" width="250" height="188" src="http://www.youtube.com/embed/UmFjNiiVk9w?rel=0" frameborder="0"></iframe>'; 
       //var video = '<iframe title="YouTube video player" class="youtube-player" type="text/html" width="200" height="180" src="//www.youtube.com/embed/4gMH0V4L4A4?rel=0" frameborder="0"></iframe>' 
       //var video = '<iframe width="420" height="315" src="//www.youtube.com/embed/S_9CSFeO9sM?rel=0" frameborder="0" allowfullscreen></iframe>' 
       var media = "<b>" + 'Laatste foto, ontvangen op 15:33 9-7-2013' + "</b>" + '<img src="others/schiphol_marechaussee.jpg" alt="laatste foto">' ; //html inside InfoWindow 
       var contact = ' <form><textarea rows="10" cols="30">Typ hier je bericht</textarea>' + '<input type="reset" value="Verstuur"></form>'; //html inside InfoWindow 


       if (markerData[i][5] == 'info') { 
        bindInfoWindowInfo(marker, map, infoBubble, info); 
        infoBubble.addTab('Info', info); 
        infoBubble.addTab('Contact', contact); 
        infoBubble.addTab('Media', media); 
       }; 
       if (markerData[i][5] == 'video') { 
        bindInfoWindowVideo(marker, map, infoBubble, video); 
        infoBubble.addTab('Video', video); 
       }; 


       return marker; 
      } 

체크 박스를 클릭하면, 마커가 나타납니다 (그 이후는, setVisible이 거짓 그 이유는). 난 당신의 코드를 실행하면

Answer 1

나는 자바 스크립트 콘솔에서이 오류가 발생합니다 :

Error: google.maps.MarkerWithLabel is not a constructor

MarkerWithLabel는 Google Maps API v3의 일부가 아니므로.

var marker = new MarkerWithLabel({ 
       map: map, 
       ... 

working example (at least the MarkerWithLabel is working)