Raty Star rating in google map infowindow
I added a marker on google map with some search results.
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
var contentString="";var image_path1="";
contentString += '<div class="browse-map-venue" style="padding:5px;width: 230px;">';
contentString += '<div class="rating" style="float: right; padding-right: 10px;">';
contentString += '<script type="text/javascript" src="<?php echo base_url(); ?>media/front/js/jquery.raty.min.js"><\/script>';
contentString += '<script>';
contentString += '$(function() {';
contentString += '$("#rating_fixed_rate_pop_'+ i +'").raty({';
contentString += 'readOnly: true,';
contentString += 'half: true,';
contentString += 'start: '+ locations[i][6] +',';
contentString += 'score: '+ locations[i][6] +',';
contentString += 'path: "<?php echo base_url(); ?>media/front/img"';
contentString += '});';
contentString += '});';
contentString += '<\/script> ';
contentString += '<div id="rating_fixed_rate_pop_'+ i +'"></div>';
contentString += '<a href="javascript:void(0);">'+ locations[i][7] +' reviews</a>';
contentString += '</div>';
contentString += '</div>';
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1],locations[i][2]),
title: locations[i][3],
info: contentString,
map: map
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(this.info);
infowindow.open(map, this);
});
}
But I need to add a star rating with raty js that doesn't apply to it when I click on the marker.
Note. When we edit a script written for evaluation from the console and stars are displayed immediately after hitting enter. But I want the ones to be displayed when I click the marker only in the infowindow.
Thanks in advance!
+3
source to share
1 answer
- Instead of using string, use node to create content (to be able to easily access content through jQuery)
- store the rating as an attribute of a specific node (to be able to use one function to create stars)
simple demo:
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);
html,
body,
#map_canvas {
height: 100%;
margin: 0;
padding: 0
}
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<script src="https://raw.githubusercontent.com/wbotelhos/raty/master/lib/jquery.raty.js"></script>
<div id="map_canvas"></div>
+1
source to share