Не появляется 3 карта на сайте, что делать?

Добрый день.
На сайте есть 4 карты.
Карты работают через google maps.

Js Для карты:
var GM = {
    init: function () {
        this.initMap();
        this.initMap2();
         this.initMap3();
    },
    initMap: function () {
        var coordinates = {lat: 47.212325, lng: 38.933663},
        markerImage = 'img/pin.svg',
        zoom = 17,
        latitude =47.212325, 
        longitude = 38.934783, 

        map = new google.maps.Map(document.getElementById('map'), {
            center: coordinates,
            zoom: zoom,
            disableDefaultUI: true,
            scrollwheel: false
        }),
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(latitude, longitude),
            map: map,
            icon: markerImage
        });

        $.getJSON("json/map-color.json", function (data) {
            map.setOptions({styles: data});
        });
    },
    initMap2: function () {
        var coordinates2 = {lat: 47.212325, lng: 38.935663},
        markerImage2 = 'img/pin.svg',
        zoom = 17,
        latitude2 =47.212325, 
        longitude2 = 38.936783, 

        map2 = new google.maps.Map(document.getElementById('map2'), {
            center: coordinates2,
            zoom: zoom,
            disableDefaultUI: true,
            scrollwheel: false
        }),
        marker2 = new google.maps.Marker({
            position: new google.maps.LatLng(latitude2, longitude2),
            map: map2,
            icon: markerImage2
        });

        $.getJSON("json/map-color.json", function (data) {
            map2.setOptions({styles: data});
        });
    },

    initMap3: function () {
        var coordinates3 = {lat: 47.212325, lng: 38.935663},
        markerImage3 = 'img/pin.svg',
        zoom = 17,
        latitude3 =47.212325, 
        longitude3 = 38.936783, 

        map3 = new google.maps.Map(document.getElementById('map3'), {
            center: coordinates3,
            zoom: zoom,
            disableDefaultUI: true,
            scrollwheel: false
        }),
        marker3 = new google.maps.Marker({
            position: new google.maps.LatLng(latitude3, longitude3),
            map: map3,
            icon: markerImage3
        });

        $.getJSON("json/map-color.json", function (data) {
            map3.setOptions({styles: data});
        });
    }
};

$(document).ready(function() {
    GM.init();
});


Код html
<div class="b-gmap" id="map"></div>
<div class="b-gmap" id="map2"></div>
<div  id="map3"></div>


По каким то причинам первых две карты появляются, а 3 не хочет, 2 карты первых на одной страницу, остальные на другой.В чем причина?
  • Вопрос задан
  • 32 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы