add more content to infowindow in google maps api - wordpress

Question

I am using Advanced Custom Fields to set the location of a post and display it on a map within my custom post template and it works great. But I have also created a google map that plots all the locations of my custom posts types on one map.
My problem is that I can’t get it to pull content or a link into the infowindow from those custom posts. I also can't get it to change the marker depending on a true/false field.
I’ve looked around the internet and tried to use the code that google suggests as well as the users on this site, but I seem to be doing something wrong. All it does is display the title followed by a weird symbol. Any help would be appreciated :)
This is the code I am using:
<section>
<?php
$args = array(
'post_type' => 'offices',
'posts_per_page' => -1
);
// query
$wp_query = new WP_Query( $args );
$NUM = 0;
?>
<div id="map"></div>
<script src='http://maps.googleapis.com/maps/api/js?sensor=false' type='text/javascript'></script>
<script type="text/javascript">
var locations = [<?php while( $wp_query->have_posts() ){
$wp_query->the_post();
$location = get_field('location'); // IMPORTANT << Change this for your Google map field name !!!!!!
?>
['<?php the_title(); ?>', <?php echo $location['lat']; ?>, <?php echo $location['lng'];?>, <?php $NUM++ ?> ],
<?php } ?> ];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 7, /*Here you change zoom for your map*/
center: new google.maps.LatLng(42.6, -76.0), /*Here you change center map first location*/
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
</script>
</section>

Answer 1

Yes, I got your problem. As per me you are doing well but you need to modify your code slightly.
Just make an array of values in your while loop like for markers :
$marker[] = '"'.get_the_title().'"'.','.$event_lat.','.$event_long;
and for marker details like :
$marker_details[] = get_the_title().'_sunil_'.get_the_content($post->ID).'_sunil_'.$ev_location.'_sunil_'.get_permalink($post->ID);
Then after this just place your script using foreach loop and explode above $marker_details array by separator sunil.
The code will be :
var markers = [
<?php foreach ($marker as $mar){
echo "[".$mar."],";
};?>
];
var infoWindowContent = [
<?php foreach ($marker_details as $mar_det){
$check_val = explode('_sunil_',$mar_det);?>
['<div class="info_content">' +
'<h3 style="display:block"><?php echo $check_val[0];?></h3><strong style="display:block;text-transform:capitalize;"><?php echo "Location : ".$check_val[2];?></strong>' +
'<p><?php echo substr($check_val[1], 0, 200);?>...</p>Read More' + '</div>'],
<?php }?>
];
Do not disturb structure by even a single comma while making it dynamic using loops. Just take a fresh html and implementation instructions from here : http://www.wptricks24.com/map-with-multiple-markers