Map 3 does not appear on the site, what should I do?

Question

JavaScript

Good afternoon.
There are 4 maps on the site.
Maps work through google maps.

js for map:

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 code

<div class="b-gmap" id="map"></div>
<div class="b-gmap" id="map2"></div>
<div  id="map3"></div>

For some reason, the first two cards appear, but 3 do not want to, 2 cards of the first on one page, the rest on the other. What is the reason?