php - How to add star rating in google map api infowindow? -

i working on wordpress site use google map api, encounter problem adding rating widget in google map infowindow. rating criteria showing not star.

here screenshot

and here code

 <script type="text/javascript">     jquery(function($) {     // asynchronously load map api      var script = document.createelement('script');     script.src = "http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize";     document.body.appendchild(script); }); function initialize() {     var map, casino_name, lat, longt ;     var bounds = new google.maps.latlngbounds();     var mapoptions = {         maptypeid: 'roadmap'     };      // display map on page     map = new google.maps.map(document.getelementbyid("map_canvas"), mapoptions);     map.settilt(45);      // multiple markers     var markers = [         //[casino_name, lat,  longt],         <?php         $tooltip = '';         $args = array(             'post_type' => 'page',             'post_parent' => get_the_id(),         );         // query         $the_query = new wp_query( $args );         // loop         if ( $the_query->have_posts() ) {             while ( $the_query->have_posts() ) {                 $the_query->the_post();                 $post_id = get_the_id();                     echo "['".$casino_name = get_field('casino_name', $post_id)."', ".get_field('latitude', $post_id).', '.get_field('longitude', $post_id).']';                     $rating = do_shortcode('[ratingwidget type="page" post_id='.get_the_id().']');                     $tooltip .= "['".'<img src="'.get_field('casino_logo', $post_id).'" alt=""/>'." ".'<a class="casino-link" href="'.get_field('casino_link', $post_id).'">'.get_field('casino_name', $post_id).'</a>'." ".$rating."']";                      if (($the_query->current_post +1) != ($the_query->post_count)){                         echo ',';                         $tooltip .= ',';                     }                   wp_reset_postdata();             }          }          /* restore original post data */         wp_reset_postdata();      ?>      ];    // info window content     var infowindowcontent = [        <?php echo $tooltip;  ?>     ];       // display multiple markers on map     var infowindow = new google.maps.infowindow();     var  marker, i;      // loop through our array of markers & place each 1 on map       for( = 0; < markers.length; i++ ) {         var position = new google.maps.latlng(markers[i][1], markers[i][2]);         bounds.extend(position);         marker = new google.maps.marker({             position: position,             map: map,             title: markers[i][0]         });          // allow each marker have info window             google.maps.event.addlistener(marker, 'click', (function(marker, i) {             return function() {                infowindow.setcontent(infowindowcontent[i][0]);                 infowindow.open(map, marker);                 console.log(infowindow);             }         })(marker, i));          // automatically center map fitting markers on screen         map.fitbounds(bounds);     }      // override our map zoom level once our fitbounds function runs (make sure runs once)     var boundslistener = google.maps.event.addlistener((map), 'bounds_changed', function(event) {         this.setzoom(14);         google.maps.event.removelistener(boundslistener);     });  } </script> 

to implement info box instead of standard info window, first add infobox js site.

set options info box based on list of options in properties table @ bottom of this page.

here's quick example, these options can go anywhere in maps code:

// set infobox options var boxoptions = {     boxclass: "box-styles", /* applies class box styling */     zindex: 9999,     boxstyle: {         opacity: 0.75,         width: "222px"     },     closeboxmargin: "10px",     closeboxurl: "/assets/img/icons/cancel.png", } 

then in code, replace:

// display multiple markers on map var infowindow = new google.maps.infowindow(); 

with:

// display multiple markers on map var infobox = new infobox(boxoptions); 

then replace each instance of infowindow() infobox() in click event so:

// allow each marker have info window     google.maps.event.addlistener(marker, 'click', (function(marker, i) {         return function() {         infobox.setcontent(infowindowcontent[i][0]);         infobox.open(map, marker);         console.log(infobox);     } })(marker, i)); 

the above should give rough idea of how implement this. if still having trouble - suggest create fiddle code , work that. hope helps.

also have @ examples here: http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/examples.html