This is so frustrating, I copied everything exactly from the documentation
http://kaylagotchased.com/#!/Hotels if you click on “Directions” you’ll see that the mp is there but a grey box.
Is it wrong to have the api key in the enqueued script and in the function from the documentation?
I have a google map at the bottom of my page that I did from scratch that works.
Okay, after a lot of fiddling around I learned it’s because it’s inside of my bootstrap tab.
I have google.maps.event.trigger(map, ‘resize’); in my js but I guess it’s in the incorrect spot, where do I put this exactly in the documentation’s js?
$('a[href="#directions"]').one('click',function(){
$('.hotel-map').each(function(){
// create map
map = new_map( $(this) );
});
});
I got this to work using your solution, but when clicking back to another tab or showing different maps on multiple tabs they immediately revert back to being beige / grey boxes. Any thoughts?