I am trying to make a travel blog page that will be capable of having
different maps with each post.
I’d like all maps to be visible on the index page. I have gotten the map to work on a single-page post, but it vanishes on the content.php, and on the index.php only one map appears, the first one entered, not the one that fits the post.
<div id="view1">
<?php
$location = get_field(‘google_map’);
if( ! empty($location) ):
?>
<div id=”map” style=”width: 100%; height: 350px;”></div>
<script type=”text/javascript”>
//<![CDATA[
function load() {
var lat = <?php echo $location[‘lat’]; ?>;
var lng = <?php echo $location[‘lng’]; ?>;
// coordinates to latLng
var latlng = new google.maps.LatLng(lat, lng);
// map Options
var myOptions = {
zoom: 9,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
//draw a map
var map = new google.maps.Map(document.getElementById(“map”), myOptions);
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map
});
}
// call the function
load();
//]]>
</script>
<?php endif; ?>
</div> <!– MAP –>`
I have tried this on all pages which contain the loop, it is consistently good only on single page posts.
I tried the googleapis.com/maps script link in various places, but finished by leaving it only on the header
Thanks,
Eve
