Вначале у меня был один контейнер для всех карт, в скрипте я при переключении карт его очищал и заново инициализировал. Но в таком способе оказалось несколько затруднений. Поэтому я сделал отдельные контейнеры для каждой карты и переключаю их видимость скриптом:
1.
2.
<div id="map-frame-google" class="hidden" style="width: 100%; height: 450px;"></div>
<div id="map-frame-yandex" class="hidden" style="width: 100%; height: 450px;"></div>
Так же я убрал асинхронную загрузку:
1.
2.
3.
4.
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=key"></script>
<script src="maps.js"></script>
Файл maps.js выглядит так (все лишнее убрал):
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
var maps = {google:null, yandex:null};
function initMap() {
var $mode = <выясняется текущий режим, google или yandex>;
$('[id|="map-frame"]').addClass('hidden');
$('#map-frame-'+$mode).removeClass('hidden');
switch ($mode)
{
case 'google':
initMapGoogle();
break;
case 'yandex':
ymaps.ready(initMapYandex);
break;
}
}
function initMapGoogle() {
return; // сейчас инициализация карт Google отключена
if (!maps.google) {
maps.google = google.maps.Map(document.getElementById('map-frame-google'), {center: {lat:20, lng:30}, zoom: 10});
setMapGoogle('село Кукуево');
}
}
function initMapYandex() {
if (!maps.yandex) {
maps.yandex = new ymaps.Map('map-frame-yandex', {center: [20, 30], zoom: 10});
setMapYandex('село Кукуево');
}
}
function setMap(source) {
var $mode = <выясняется текущий режим, google или yandex>;
switch ($mode)
{
case 'google':
setMapGoogle(source);
break;
case 'yandex':
setMapYandex(source);
break;
}
}
function setMapGoogle(source) {
}
function setMapYandex(source) {
maps.yandex.geoObjects.removeAll();
maps.yandex.geoObjects.add(maps['yandex-base']);
var multiRoute = new ymaps.multiRouter.MultiRoute({referencePoints: [source, 'Москва']}, {boundsAutoApply:true});
maps.yandex.geoObjects.add(multiRoute);
multiRoute.events.once('update', function () {
var routes = multiRoute.getRoutes();
for (var i = 0, l = routes.getLength(); i < l; i++) {
var route = routes.get(i);
if (!route.properties.get('blocked')) {
multiRoute.setActiveRoute(route);
route.balloon.open();
break;
}
}
});
}
$('#map-citylist a').on('click', function(event){
event.preventDefault();
setMap($(this).text());
});
$(document).ready(function() {
initMap();
});
В таком варианты Яндекс-Карты работают нормально — успешно инициализируются и работает построение маршрута.
Но как только я убираю заглушку-return из функции initMapGoogle, как получаю ошибку jQuery.Deferred exception.
Если поменять порядок подключения скриптов (вначале maps.js, затем Карту Google) и добавить в подключаемый скрипт Гугл-Карт параметр callback=initMap, то получаю другую ошибку: Uncaught TypeError: this.setValues is not a function.
Не подскажите, как сделать правильно?
