How to add star rating in google map api infowindow?

Question

I am working on a wordpress site that will use a google map api, but i encounter a problem by adding rating widget in the google map infowindow. The rating criteria is showing but not the star.

Here is the screenshot

and here is my code

 <script type="text/javascript">
    jQuery(function($) {
    // Asynchronously Load the 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 a map on the 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(),
        );
        // The Query
        $the_query = new WP_Query( $args );
        // The 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 a map
    var infoWindow = new google.maps.InfoWindow();
    var  marker, i;

    // Loop through our array of markers & place each one on the map  
    for( i = 0; i < 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 to have an 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 the map fitting all markers on the screen
        map.fitBounds(bounds);
    }

    // Override our map zoom level once our fitBounds function runs (Make sure it only runs once)
    var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
        this.setZoom(14);
        google.maps.event.removeListener(boundsListener);
    });

}
</script>

Answer 1

To implement Info Box instead of the standard Info Window, first add the InfoBox JS to your site.

Set the options for your Info Box based on the list of options in the properties table at the bottom of this page.

Here's a quick example, these options can go anywhere in your maps code:

// Set infobox options
var boxOptions = {
    boxClass: "box-styles", /* Applies a class to your box for styling */
    zIndex: 9999,
    boxStyle: {
        opacity: 0.75,
        width: "222px"
    },
    closeBoxMargin: "10px",
    closeBoxURL: "/assets/img/icons/cancel.png",
}

Then in your code, just replace:

// Display multiple markers on a map
var infoWindow = new google.maps.InfoWindow();

With:

// Display multiple markers on a map
var infoBox = new InfoBox(boxOptions);

Then replace each instance of InfoWindow() with InfoBox() in your click event like so:

// Allow each marker to have an 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 a rough idea of how to implement this. If your still having trouble - I suggest you create a fiddle with your code and work from that. Hope this helps.

Also have a look at the examples here: http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/examples.html