Rateit или Raty в информационном окне (Google Maps)

Question

Я пытаюсь внедрить рейтинговую систему внутри InfoWindow на Google Maps API версии 3.

Я попытался как Rateit и Räty и я coudn't сделать ни один из них Работа.

Я попробовал этот код здесь, и он не работает для меня:

function initialize() { 
    var mapOptions = { 
     zoom: 5, 
     center: new google.maps.LatLng(2, 2), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
     }, 
     map = new google.maps.Map(document.getElementById('map_canvas'), 
     mapOptions), 
     locations = [ 
     [null, 1, 1, 'title#1', null, null, 1.3, 'foo'], 
     [null, 2, 2, 'title#2', null, null, 3.7, 'bar'], 
     [null, 3, 3, 'title#3', null, null, 4.3, 'boofar'] 
     ], 
     infowindow = new google.maps.InfoWindow(), 
     i; 
    //use the domready-event of the infowindow to execute $.raty 
    google.maps.event.addListener(infowindow, 'domready', function() { 
     $(this.getContent()).find('.stars').raty({ 
     half: true, 
     score: function() { 
      return $(this).attr('data-score'); 
     }, 
     readOnly: true, 
     path: 'https://raw.githubusercontent.com/wbotelhos/raty/master/demo/images/' 
     }); 
    }); 
    for (i = 0; i < locations.length; i++) { 
     (function(location) { 
     var marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(location[1], location[2]), 
      title: location[3], 
      map: map, 
      info: $('<div/>') 
      //the rating 
      .append($('<div class="stars"></div>').attr('data-score', location[6])) 
      //review-link 
      .append($('<a href="javascript:void(0);">' + locations[i][7] + ' reviews</a>')) 
     }); 
     google.maps.event.addListener(marker, 'click', function() { 
      infowindow.setContent(this.info[0]); 
      infowindow.open(map, this); 
     }); 
     }(locations[i])) 






    } 
    } 

    google.maps.event.addDomListener(window, 'load', initialize); 

Вот мой код, и то, что я сделал до сих пор.

Сценарии:

<!-- Load libraries --> 
<script src="js/jquery-1.12.1.min.js"></script> 
<script src="js/jquery.raty.js"></script> 
<!-- Google Maps API tag --> 
<script src="https://maps.googleapis.com/maps/api/js?v=3"> 
</script> 

<script type="text/javascript"> 
    window.addEventListener("load",function() { 
     // Set a timeout... 
     setTimeout(function(){ 
     // Hide the address bar! 
     window.scrollTo(0, 1); 
     }, 0); 
    }); 
    $('.search-box,.menu').hide(); 
    $('.options li:first-child').click(function(){ 
     $(this).toggleClass('active'); 
     $('.search-box').toggle();     
     $('.menu').hide();   
     $('.options li:last-child').removeClass('active'); 
    }); 
    $('.options li:last-child').click(function(){ 
     $(this).toggleClass('active');     
     $('.menu').toggle();   
     $('.search-box').hide(); 
     $('.options li:first-child').removeClass('active');   
    }); 
    $('.content').click(function(){ 
     $('.search-box,.menu').hide(); 
     $('.options li:last-child, .options li:first-child').removeClass('active'); 
    }); 
</script> 



<!-- Google Maps Script --> 
<script type="text/javascript"> 
function initMap() { 
    // Create a map object and specify the DOM element for display. 

    var zoomlevel = 10; 
    var abudhabi = {lat:24.373368, lng:54.488754}; 

    var map = new google.maps.Map(document.getElementById('map'), { 
    center: abudhabi, 
    scrollwheel: false, 
    zoom: zoomlevel 
    }); 



    // Load up markers with their labels and infos. 
    //Test variables: 
    var locations = [ 
     ['McGettigan \'s Irish Pub',24.438533,54.572991,2], 
     ['Cooper\'s',24.4238,54.473619,3] 

    ]; 
    var infowindow = new google.maps.InfoWindow(); 

    //on infowindow load -> read data and display stars 
    google.maps.event.addListener(infowindow, 'domready', function() { 
      $(this.getContent()).find('.stars').raty({ 
      score: function() { 
       return $(this).attr('data-score'); // THIS DOESN'T RETURN ANY VALUE... 
      }, 
      readOnly: true, 
      path: 'images/' //this is my path for the images, they are fine... 
      }); 
    }); 

    for (var i=0; i<locations.length; i++){ 
     (function(location){ 
      var marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(location[1], location[2]), 
      title: location[0], 
      map: map, 
      info: $('<div/>') 
       .append($('<div class="stars"></div>').attr('data-score', location[3])) 
      }); 
      // Add event listener on marker -> open info 
      google.maps.event.addListener(marker, 'click',function(){ 
       infowindow.setContent(this.info[0]); 
       infowindow.open(map,this); 
      }); 
      })(locations[i]) 

    } 


} 

google.maps.event.addDomListener(window,'load',initMap); 

</script> 

raty.js возвращается (строка 1 ошибка): Error: Invalid селектор!

Действительно оцените помощь, я новичок в javascript и jquery. Я изо всех сил старался, но я не понял, почему это не работает. Спасибо заранее.

Answer 1

Нашел мою ошибку: скрипт Rateit работал до того, как я вставляю тег div для его чтения. Я пропустил базовую концепцию здесь. Решение было таким:

var infowindow = new google.maps.InfoWindow(); 

    //on infowindow load -> read data and display stars 
    google.maps.event.addListener(infowindow, 'domready', function() { 
     $("#info").rateit(); //HERE IS THE TRICK (CALL RATEIT AGAIN) 
    }); 

    for (var i=0; i<locations.length; i++){ 
     (function(location){ 
      var marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(location[1], location[2]), 
      title: location[0], 
      map: map, 
      }); 
      // Add event listener on marker -> open info 
      google.maps.event.addListener(marker, 'click',function(){ 
       var content = '<div class="rateit"'+ 
       ' data-rateit-value="'+ location[3] + 
       '" data-rateit-ispreset="true" data-rateit-readonly="true"'+ 
       ' id="info"></div>'; 
       infowindow.open(map,this); 
       infowindow.setContent(content); 

      }); 
      })(locations[i]) 

    } 

В любом случае, я все еще не мог сделать ратичную работу. Каждый раз, когда я называл это внутри событий «domready», появлялось множество звезд, и функция оценки никогда не возвращала атрибут «балл данных».

В любом случае, я нашел другой способ, так что на данный момент все нормально.

Спасибо.