Правильный тег уже подобрали, пол дела сделано :) осталось разобраться в нём.
https://api.jquery.com/jQuery.ajax/

В jquery это примерно так:

$.post( "index.php", { name: "John" } )
  .done(function( data ) {
    alert( "Ответ сервера: " + data );
});

.htaccess

RewriteEngine On
RewriteBase /
RewriteRule ^.*$ page.php

Инфа в доке: https://tech.yandex.ru/maps/doc/jsapi/2.0/ref/refe...
Пример из доки:

// Полёт из Калининграда во Владивосток через Москву
map.setCenter([54.704815, 20.466380], 10);
map.panTo([
    [ 55.751574, 37.573856 ],
    [ 43.134091, 131.928478 ]
], {
    callback: function () {
        alert('Прилетели!');
    }
});

Кусок кода из вашего примера сайта:

document.querySelector('#showMap_1').addEventListener('click', function() {
    myMap.setZoom( 15 );
    myMap.panTo([55.66837606904998,37.484163499999944],{flying:1});
});

Так как блоки изначально скрыты, браузер картинки не загружает в фоновом режиме, когда вы начинаете разворачивать скрипт не может посчитать правильное значение высоты. Поэтому во второй раз, когда картинки уже подгружены, подсчитывается правильная высота. Как вариант указать картинкам сразу фиксированные размеры, должно решить проблему. Ну и вам уже сказали картинки не для веба, слишком большие, уменьшайте их.