Alex Carpenter Alex Carpenter - 2 months ago 23
Javascript Question

Foundation tabs and Google Map

I am putting a google map inside of a foundation tab and it loads as grey with no controls. If I resize the browser in any capacity then the map will show properly, but I don't know how to get it to refresh/resize the map when the specific tab is selected. All help is greatly appreciated.

<style>
#propertymap {
width: 100%;
height:480px;
}

</style>

<ul class="tabs" data-tab>
<li class="tab-title active"><a href="#panel1">Pictures</a></li>
<li class="tab-title"><a href="#panel2">Virtual Walkthrough</a></li>
<li class="tab-title"><a href="#panel3">Map</a></li>
</ul>
<div class="tabs-content">
<div class="content active" id="panel1">
<p>Pictures</p>
</div>
<div class="content" id="panel2">
<p>Virtual Walkthrough</p>
</div>
<div class="content" id="panel3">
<div id="propertymap"></div>
<script>
var latitude={tag_latitude}, //the tag is for the business catalyst web app
longitude={tag_longitude};

var marker;

function initMap() {
var map = new google.maps.Map(document.getElementById('propertymap'), {
center: {lat: latitude, lng: longitude},
zoom: 15
});

marker = new google.maps.Marker({
map: map,
draggable: true,
animation: google.maps.Animation.DROP,
position: {lat: latitude, lng: longitude}
});
marker.addListener('click', toggleBounce);
}

function toggleBounce() {
if (marker.getAnimation() !== null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
</script>
<style>
#propertymap {
width: 100%;
height:480px;
}

</style>

<ul class="tabs" data-tab>
<li class="tab-title active"><a href="#panel1">Pictures</a></li>
<li class="tab-title"><a href="#panel2">Virtual Walkthrough</a></li>
<li class="tab-title"><a href="#panel3">Map</a></li>
</ul>
<div class="tabs-content">
<div class="content active" id="panel1">
<p>Pictures</p>
</div>
<div class="content" id="panel2">
<p>Virtual Walkthrough</p>
</div>
<div class="content" id="panel3">
<div id="propertymap"></div>
<script>
var latitude={tag_latitude}, //the tag is for the business catalyst web app
longitude={tag_longitude};

var marker;

function initMap() {
var map = new google.maps.Map(document.getElementById('propertymap'), {
center: {lat: latitude, lng: longitude},
zoom: 15
});

marker = new google.maps.Marker({
map: map,
draggable: true,
animation: google.maps.Animation.DROP,
position: {lat: latitude, lng: longitude}
});
marker.addListener('click', toggleBounce);
}

function toggleBounce() {
if (marker.getAnimation() !== null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
</script>



</div>
</div>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&callback=initMap"></script>

</div>
</div>


http://vprintz.businesscatalyst.com/property-list/4-bay-meadows is how it shows on the site

Answer

This is the solution I ended up going with:

<script>
var latitude={tag_latitude}, //the tag is for the business catalyst web app 
    longitude={tag_longitude};

var marker;

function initMap() {
   var map = new google.maps.Map(document.getElementById('propertymap'), {    
   //change propertymap to your map id
   center: {lat: latitude, lng: longitude},
   zoom: 15 //set to preferred zoom level
});

marker = new google.maps.Marker({
   map: map,
   draggable: true,
   animation: google.maps.Animation.DROP,
   position: {lat: latitude, lng: longitude}
 });

 marker.addListener('click', toggleBounce); //for marker drop animation, can be removed

jQuery('#panel3').on('toggled', function(){ //change #panel3 to your tab id
    var center = new google.maps.LatLng(latitude, longitude);
    map.setCenter(center); //must recenter map after tab loads
    google.maps.event.trigger(map,'resize',{});
 });

}

function toggleBounce() { // for marker drop animation, can be removed
 if (marker.getAnimation() !== null) {
   marker.setAnimation(null);
 } else {
 marker.setAnimation(google.maps.Animation.BOUNCE);
 }
}
</script>
Comments