There are 2 issues:
var labelka = "#spot"+marker.id
var html_part ="<div id=\""+labelka+"\"></div>";
this will create the following markup:
<div id="#spotSomeMarkerId"></div>
This node may not be selected in jQuery by using $('#spotSomeMarkerId');
, because the # must be ommitted in the id-attribute of the <div/>
.
The basic problem: The content of the InfoWindow is provided as string, the DOM for this content will be available when the domready-event of the InfoWindow fires, not before. You can't call $.raty()
for the paricular InfoWindow before that.
Possible solutions:
- as mentioned, wait until the domready-event fires
- use a DOM-Node as content for the InfoWindow, in that case you may call raty as soon as you have created the DOM-Node(no matter if the Node has already been injected into the document/the InfoWindow is open)
code for the 2nd approach(use it as replacement for the lines 121-123 of your gist):
var contencik = $('<div><h4>'+marker.name+'</h4><br>'
+ marker.address_street
+ ' '+marker.address_number
+ '<br>Rating:</div>')
//the content is ready, it's a query-object
//now we append-the raty-container and call raty immediately
//for this container
.append($('<div id="spot'+marker.id+'"></div>')
.raty({ readOnly: true, score: marker.friendly_rate}))
//the content is still a jQuery-object
//we need a DOM-node to pass it to the
//content-property of the InfoWindow
[0];