Google maps not showing in Foundation sections - google-maps-api-3

Question

I have the same question as asked here but provided no accepted answer has been given and that my procedure is different, I'm opening a new one.
I have a map inside a Foundation tab that is hidden at the beginning and it only displays part of the map when opened. I've read the issues related to that and tried the attempts there but no luck. I know I have to re-initialize the map on tab change but I can't make it work.
I have a function that holds all the map info:
function startMap(obj){
var markers = new Array();
var glat_center = $(obj).attr('data-glat');
var glong_center = $(obj).attr('data-glong');
var Latlng_center = new google.maps.LatLng(glat_center, glong_center);
var mapOptions = {
zoom: zoom,
scrollwheel: false,
center: Latlng_center,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: mapStyles,
mapTypeControl: false,
streetViewControl: false,
minZoom: 4,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL,
position: google.maps.ControlPosition.TOP_RIGHT
}
};
var map = new google.maps.Map(obj, mapOptions);
if($(obj).attr('data-glat') && $(obj).attr('data-glong')){
var glat = $(obj).attr('data-glat');
var glong = $(obj).attr('data-glong');
var Latlng = new google.maps.LatLng(glat, glong);
var marker = new google.maps.Marker({
position: Latlng,
map: map
});
}
}
My html markup looks like this
<div class="tabs" data-section="auto">
<!--two more tabs here-->
<section class="property-location">
<a href="#" class="title" data-section-title>Title</a>
<div class="tab-content" data-slug="section3" data-section-content>
<div class="google-map" data-glat="123456" data-glong="123456" style="width: 100%; height: 440px;">
</div>
</div>
</section>
</div>
So then, what I'm trying to do is call this function when the tab is clicked, as I can't find any other tab events in Foundation docs. First I find the .title of the tab that contains the map, then look if a map exists (just in case) and then I call the function on the div holding the map.
$('.tabs .property-location').find('.title').click(function() {
if(($('.tab-content').find('.google-map')).length) {
//console.log('I found a map');
startMap($('.google-map'));
}
});
I know it's finding the map because I console.log it, but the console throws this error
NS_ERROR_FAILURE: Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMWindow.getComputedStyle]
which is on the following src http://maps.gstatic.com/intl/es_ALL/mapfiles/api-3/14/7/main.js
So it's the Google Maps JS that's throwing this error but I can't understand why.
I know it's difficult, but any ideas?

Answer 1

You pass a jQuery-element, but google maps needs a HTMLElement. Use
var map = document.querySelector('.google-map');
startMap(map);
instead of
startMap($('.google-map'));
Instead of querySelector you can use getElementsByClassName
var map = document.getElementsByClassName('google-map')[0];
But the always recommended approach is to refer to the map by an id :
<div id="the-google-map" class="google-map" data-glat="123456" data-glong="123456" style="width: 100%; height: 440px;"></div>
var map = document.getElementById('the-google-map');