I am trying to implement a rating system inside the infowindow on Google Maps API version 3.
I tried both Rateit and Raty and I coudn't make neither of them work.
I tried this code here and it doesn't work for me:
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);
Here is my code and what I have done so far.
Scripts:
<!-- 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>
The raty.js is returning (line 1 error): Error: Invalid selector!
Really appreciate the help, I am new in javascript and jquery. I tried hard but I coudn't figured out the reason why is not working. Thank you in advance.
Found my mistake: Rateit script was working before I insert the div tag for it to read. I missed a basic concept here. Solution was like this:
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])
}
In any case, I still couldn't make raty work. Everytime I called it inside 'domready' event tons of stars appeared and score function never returned the attribute 'data-score'..
Anyway I found another way so it's fine for now.
Thanks.