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

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