Your best option is probably to, while in the WP loop, assemble all the data needed to place markers and define info windows into a javascript array definition string. Once the loop concludes, output in the script block the assignment of this array to a variable.
Then simply pick each set of post data out of the array and assign it to a marker and InfoWindow while in your javascript loop.
Thread Starter
alguna
(@alguna)
Hi bcworkz,
Basically, this is what I’m trying to do, its calling well the markers with the get_post_meta, and I put in my loop the call for the title :
[<?php echo get_post_meta( $post->ID, 'location', true ); ?>, "<?php the_title(); ?>"]
So basically my final code (which is not working) is the following one, but I don’t understand what I’m doing wrong :
<div id="map" style="width: 100%; height: 300px;"></div>
<script>
function initialize() {
var locations = [
<?php $query = new WP_Query( 'cat=3' ); ?>
<?php if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); ?>
[<?php echo get_post_meta( $post->ID, 'location', true ); ?>, "<?php the_title(); ?>"],
<?php endwhile;
wp_reset_postdata();
?>
<?php endif; ?>
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: new google.maps.LatLng(45.835163, 9.029694),
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles : [{featureType:'all',stylers:[{saturation:-100},{gamma:0.0}]}]
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
var contentString = locations[i][2];
var infowindow = new google.maps.InfoWindow({
content: contentString
});
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][0], locations[i][1]),
map: map,
<?php if(in_category('8')):?>
icon: 'https://maps.google.com/mapfiles/kml/shapes/schools_maps.png',
<?php elseif (in_category('9')):?>
icon: 'https://maps.google.com/mapfiles/kml/shapes/library_maps.png',
<?php endif;?>
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Thanks in advance
This is actually very easy using Advanced Custom Fields.
http://www.advancedcustomfields.com/resources/google-map/
You’ll see some code examples at the bottom with some required css and javascript. You’ll see in the last example where he shows how to render multiple markers. And in that example he adds extra html within the maker div. That is what pops up when you click on the marker, which is automatically done with the provided javascript.
Since you’re going about rendering your maps in a slightly different way with location info you already have, you may just want to see how he is rendering the InfoWindow();
Well, it looks like you have the right idea anyway. I’m not sure what the problem is, it’s difficult to read someone else’s mixed code like that. At least for me it is. Further more, I haven’t worked with Google maps in earnest in quite some time. As in v1, the v2 methods have been totally rearranged and are unfamiliar to me.
Have you looked at the page output source? It may be more clear what the problem is in straight JS. Check the browser’s console for JS errors. Have you tried simply hardcoding a test info window? If that was successful, it should be a matter of getting PHP output to match the hardcode test.
Thread Starter
alguna
(@alguna)
Hi again bcworkz and acrane,
It finally works, thanks for the help 🙂
Everything needed to be declared in the for loop,
Thanks
