-1
我想在3個響應標籤上新增3個谷歌地圖，但只有第一個作品：谷歌地圖在響應標籤
我已經嘗試了很多不同的解決方案，包括在提供大量的寬度定義地圖大小，而不是自動，但結果相同。
對於我的理解是，我需要告訴腳本是這樣的改變標籤時來調整：
google.maps.event.trigger(map, 'resize');
，但我不知道怎麼辦。任何人都可以幫忙嗎？
如果我手動調整窗口的大小，地圖會顯示在數據倉庫
一件事的時候，我有一個語法錯誤，頁面實際工作中的實時預覽，但如果我救。只是覺得我應該提到它。
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'
\t
\t });
}
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;
})();
\t var myTabs = tabs({
\t el: '#tabs',
\t tabNavigationLinks: '.c-tabs-nav__link',
\t tabContentContainers: '.c-tab'
\t });
\t 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>
\t <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
\t <link href="style.css" rel="stylesheet" type="text/css">
\t <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>
\t <title></title>
</head>
<body>
\t <div class="c-tabs no-js" id="tabs">
\t \t <div class="c-tabs-nav">
\t \t \t <a class="c-tabs-nav__link is-active" href="#">
\t \t \t <p>Mappa</p></a> <a class="c-tabs-nav__link" href="#">
\t \t \t <p>Navi</p></a> <a class="c-tabs-nav__link" href="#">
\t \t \t <p>Streat</p></a>
\t \t </div>
\t \t <div class="c-tab is-active">
\t \t \t <div class="c-tab__content">
\t \t \t \t <div class="masked location-image pull-right" id="map-OH"></div>
\t \t \t </div>
\t \t </div>
\t \t <div class="c-tab">
\t \t \t <div class="c-tab__content">
\t \t \t \t <div class="masked location-image pull-right" id="map-CA"></div>
\t \t \t </div>
\t \t </div>
\t \t <div class="c-tab">
\t \t \t <div class="c-tab__content">
\t \t \t \t <div class="masked location-image pull-right" id="map-UK"></div>
\t \t \t </div>
\t \t </div>
\t </div>
\t <script src="tabs.js">
\t </script>
</body>
</html>