Вы несколько раз включили API JavaScript Карт Google на эту страницу. Это может вызвать непредвиденные ошибки ⇐ Html

[Anonymous]

Я создаю веб-приложение с несколькими вкладками. Я хочу, чтобы на каждой вкладке был скрипт Google Maps, отображающий карту и т. д. Я получаю сообщение об ошибке:

Код: Выделить всё

You have included the Google Maps JavaScript API multiple times on this page.
This may cause unexpected errors.

При попытке использовать его следующим образом:
В index.html:

Код: Выделить всё

West Chester Places







[b]Food[/b]
[b]Bars/Nightlife[/b]
[b]Other[/b]
Tab 4


html { height: auto; }
body { height: auto; margin: 0; padding: 0 }
#infobox { margin: 0px }
#map-canvas { height: 460px }






Come take a look at my favorite places in West Chester!
Fun with Google Maps API [url=https://github.com/rmcgarry3/FavWCPlaces](Source Code Here)[/url]





html { height: auto; }
body { height: auto; margin: 0; padding: 0 }
#infobox { margin: 0px }
#map-canvas { height: 460px }






Come take a look at my favorite places in West Chester!
Fun with Google Maps API [url=https://github.com/rmcgarry3/FavWCPlaces](Source Code Here)[/url]





html { height: auto; }
body { height: auto; margin: 0; padding: 0 }
#infobox { margin: 0px }
#map-canvas { height: 460px }






Come take a look at my favorite places in West Chester!
Fun with Google Maps API [url=https://github.com/rmcgarry3/FavWCPlaces](Source Code Here)[/url]





html { height: auto; }
body { height: auto; margin: 0; padding: 0 }
#infobox { margin: 0px }
#map-canvas { height: 460px }






Come take a look at my favorite places in West Chester!
Fun with Google Maps API [url=https://github.com/rmcgarry3/FavWCPlaces](Source Code Here)[/url]

В Mapapi.js:

Код: Выделить всё

function initialize() {
var mapOptions = {
center: {
lat: 39.9545904,
lng: -75.6029956
},
zoom: 16
};

var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var bonBonInfo = new google.maps.InfoWindow({
content: '' +
'Square One Bar1400 S Michigan Ave' +
''
});

var masInfo = new google.maps.InfoWindow({
content: '' +
'My Home!18th St &  Michigan ave' +
''
});

var loveAgainInfo = new google.maps.InfoWindow({
content: '' +
'Dusek\'s Punch Bar1227 W 18th Street' +
''
});

var diaDoceInfo = new google.maps.InfoWindow({
content: '' +
'Mercer 113113 W Hubbard Street' +
''
});

var bonBon = new google.maps.Marker({
position: {
lat: 39.959006,
lng: -75.607625
},
map: map,
title: 'Bon Bon Sushi'
});

var mas = new google.maps.Marker({
position: {
lat: 39.960265,
lng: -75.603004
},
map: map,
title: 'Más Mexicali Cantina'
});

var loveAgain = new google.maps.Marker({
position: {
lat: 39.958445,
lng: -75.605327
},
map: map,
title: 'Love Again Local'
});

var diaDoce = new google.maps.Marker({
position: {
lat: 39.958586,
lng: -75.603630
},
map: map,
title: 'Dia Doce Gourmet Cupcakes'
});

google.maps.event.addListener(bonBon, 'click', function() {
GuidedTour();
});

google.maps.event.addListener(mas, 'click', function() {
GuidedTour();
});

google.maps.event.addListener(loveAgain, 'click', function() {
GuidedTour();
});

google.maps.event.addListener(diaDoce, 'click', function() {
GuidedTour();
});

function GuidedTour() {
diaDoceInfo.close(map, loveAgain);
map.panTo(mas.getPosition());
masInfo.open(map, mas);
window.setTimeout(function() {
map.panTo(bonBon.getPosition());
masInfo.close(map, mas);
bonBonInfo.open(map, bonBon);
}, 6000)
window.setTimeout(function() {
map.panTo(loveAgain.getPosition());
bonBonInfo.close(map, bonBon);
loveAgainInfo.open(map, loveAgain);
}, 11000)
window.setTimeout(function() {
map.panTo(diaDoce.getPosition());
loveAgainInfo.close(map, loveAgain);
diaDoceInfo.open(map, diaDoce);
}, 16000)
}
}
google.maps.event.addDomListener(window, 'load', initialize);
...

В myScript.js:

Код: Выделить всё

var tabButtons = document.querySelectorAll(".tabContainer .buttonContainer button");
var tabPanels = document.querySelectorAll(".tabContainer  .tabPanel");

function showPanel(panelIndex, colorCode) {
tabButtons.forEach(function(node) {
node.style.backgroundColor = "";
node.style.color = "";
});
tabButtons[panelIndex].style.backgroundColor = colorCode;
tabButtons[panelIndex].style.color = "white";
tabPanels.forEach(function(node) {
node.style.display = "none";
});
tabPanels[panelIndex].style.display = "block";
tabPanels[panelIndex].style.backgroundColor = colorCode;
}
showPanel(0, '#7851a9');

css.css:

Код: Выделить всё

.title{
font-family: arial;
color: #000000;
text-align: center;
}
.tabContainer{
width: 100%;
height: 350px;
}
.tabContainer .buttonContainer{
height: 15%;
}
.tabContainer .buttonContainer button{
width: 25%;
height: 100%;
float: left;
border: none;
outline:none;
cursor: pointer;
padding: 10px;
font-family: arial;
font-size: 18px;
background-color: #eee;
}
.tabContainer .buttonContainer button:hover{
background-color: #d7d4d4;
}
.tabContainer .tabPanel{
height: 85%;
background-color: gray;
color: white;
text-align: center;
padding-top: 25px;
padding-bottom: 700px;
box-sizing: border-box;
font-family: sans-serif;
font-size: 22px;
display: none;
}
.centerText {
font-size: 5;
font-family: arial;
padding-bottom: 25px;
}

Как использовать один и тот же скрипт/ключ для нескольких вкладок?

Подробнее здесь: https://stackoverflow.com/questions/621 ... is-page-th