-1
私は3つの応答のタブに3つのGoogleマップを追加しようとしているが、最初の一つだけの作品：Googleマップ
私が定義する幅に番号を与えるなど、さまざまなソリューションを、試してみました地図のサイズは、自動ではなく同じ結果になります。
私が理解し何のために私はこのようなもので、タブを変更するときにサイズを変更するスクリプトを指示する必要がありますされています
google.maps.event.trigger(map, 'resize');
、マップは、ページが実際にライブプレビューで動作しますが、私は保存しない場合は、Dwの中
もう一つが表示されます。ちょうど私がそれを言及すべきだと思った
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>