Google Maps in responsive tabs

Question

I'm trying to add 3 Google maps in 3 responsive tabs but only the first one works:

I've tried many different solutions, including giving a number to the width to define the map size, instead of auto, but same results.

For what I understood is I need to tell the script to resize when changing tabs with something like this:

google.maps.event.trigger(map, 'resize');

but i don't know how. Can any one help please.

If I manually resize the window, the map will show

One more thing in Dw when i have a syntax error, the page actually works in the live preview, but not if i save. Just thought i should mention it.

 function initialize() { var myLatlngOH = new google.maps.LatLng(39.630159,-84.175937); var myLatlngCA = new google.maps.LatLng(33.677705,-117.852974); var myLatlngUK = new google.maps.LatLng(51.520614,-0.121825); var mapOptionsOH = { zoom: 5, center: myLatlngOH, mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControl: 1 } var mapOptionsCA = { zoom: 5, center: myLatlngCA, mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControl: 1 } var mapOptionsUK = { zoom: 5, center: myLatlngUK, mapTypeId: google.maps.MapTypeId.ROADMAP, mapTypeControl: 1 } var mapOH = new google.maps.Map(document.getElementById('map-OH'), mapOptionsOH); var mapCA = new google.maps.Map(document.getElementById('map-CA'), mapOptionsCA); var mapUK = new google.maps.Map(document.getElementById('map-UK'), mapOptionsUK); var markerOH = new google.maps.Marker({ position: myLatlngOH, map: mapOH, title: 'Company Office - Ohio' }); var markerCA = new google.maps.Marker({ position: myLatlngCA, map: mapCA, title: 'Company Office - California' }); var markerUK = new google.maps.Marker({ position: myLatlngUK, map: mapUK, title: 'Company Office - London' }); } google.maps.event.addDomListener(window, 'load', initialize); (function() { 'use strict'; /** * tabs * * @description The Tabs component. * @param {Object} options The options hash */ var tabs = function(options) { var el = document.querySelector(options.el); var tabNavigationLinks = el.querySelectorAll(options.tabNavigationLinks); var tabContentContainers = el.querySelectorAll(options.tabContentContainers); var activeIndex = 0; var initCalled = false; /** * init * * @description Initializes the component by removing the no-js class from * the component, and attaching event listeners to each of the nav items. * Returns nothing. */ var init = function() { if (!initCalled) { initCalled = true; el.classList.remove('no-js'); for (var i = 0; i < tabNavigationLinks.length; i++) { var link = tabNavigationLinks[i]; handleClick(link, i); } } }; /** * handleClick * * @description Handles click event listeners on each of the links in the * tab navigation. Returns nothing. * @param {HTMLElement} link The link to listen for events on * @param {Number} index The index of that link */ var handleClick = function(link, index) { link.addEventListener('click', function(e) { e.preventDefault(); goToTab(index); }); }; /** * goToTab * * @description Goes to a specific tab based on index. Returns nothing. * @param {Number} index The index of the tab to go to */ var goToTab = function(index) { if (index !== activeIndex && index >= 0 && index <= tabNavigationLinks.length) { tabNavigationLinks[activeIndex].classList.remove('is-active'); tabNavigationLinks[index].classList.add('is-active'); tabContentContainers[activeIndex].classList.remove('is-active'); tabContentContainers[index].classList.add('is-active'); activeIndex = index; } }; /** * Returns init and goToTab */ return { init: init, goToTab: goToTab }; }; /** * Attach to global namespace */ window.tabs = tabs; })(); var myTabs = tabs({ el: '#tabs', tabNavigationLinks: '.c-tabs-nav__link', tabContentContainers: '.c-tab' }); myTabs.init();

 #map-OH, #map-CA, #map-UK { width: auto; height: 600PX; } .c-tabs-nav { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; list-style: none; margin: 0; padding: 0; } .c-tabs-nav__link { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; margin-right: 4px; /* padding: 12px; */ color: #fff; background-color: #b3b3b3; text-align: center; -webkit-transition: color 0.3s; transition: color 0.3s; } .c-tab { display: none; } .c-tab.is-active { display: block; }

 <!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <link href="style.css" rel="stylesheet" type="text/css"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=3.0" name="viewport"> <script src='https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyC-5CY9mOCeg5Y3IhPqi_Yd0-DZtWrJl-E'></script> <title></title> </head> <body> <div class="c-tabs no-js" id="tabs"> <div class="c-tabs-nav"> <a class="c-tabs-nav__link is-active" href="#"> <p>Mappa</p></a> <a class="c-tabs-nav__link" href="#"> <p>Navi</p></a> <a class="c-tabs-nav__link" href="#"> <p>Streat</p></a> </div> <div class="c-tab is-active"> <div class="c-tab__content"> <div class="masked location-image pull-right" id="map-OH"></div> </div> </div> <div class="c-tab"> <div class="c-tab__content"> <div class="masked location-image pull-right" id="map-CA"></div> </div> </div> <div class="c-tab"> <div class="c-tab__content"> <div class="masked location-image pull-right" id="map-UK"></div> </div> </div> </div> <script src="tabs.js"> </script> </body> </html>

Answer 1

没有解决它，但我使用 iframe 而不是 javascript，它在所有 3 个选项卡中都有效