How to add star rating to google map api infowindow?
I am working on a wordpress site that will use google goi map but I am facing problem adding rating widget to google Map infowindow. Evaluation criteria are shown, but not a star.
Here is a 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>
source to share
To embed an Info Box instead of the standard Info Box, first add the InfoBox JS to your site.
Set the parameters for your info window based on the list of parameters in the property sheet at the bottom of this page.
Here's a quick example, these parameters can go anywhere in your map 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();
FROM
// Display multiple markers on a map
var infoBox = new InfoBox(boxOptions);
Then replace each InfoWindow () instance with InfoBox () in the 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 general idea of how to implement this. If you still have problems - I suggest you create a fiddle with your code and work with it. Hope this helps.
Also consider examples here: http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/examples.html
source to share