Яндекс Геокодер. Загрузка карты при клике?

Question

lookser @lookser

Яндекс Геокодер. Загрузка карты при клике?

Адрес берем из переменной и строим карту. Сделал как мог -_-
Как сделать карту закрытой и что бы открывалась только при нажатии на кнопку? Что бы экономить бесплатные запросы к api яндекс карт.

<?php 
$ch = curl_init('https://geocode-maps.yandex.ru/1.x/?apikey=*********************-d5f35cc04120&format=json&geocode=' . urlencode($address));
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_HEADER, false);
$res = curl_exec($ch);
curl_close($ch);
 
$res = json_decode($res, true);
$coordinates = $res['response']['GeoObjectCollection']['featureMember'][0]['GeoObject']['Point']['pos'];
$coordinates = explode(' ', $coordinates);

$a = $coordinates[0];
$b = $coordinates[1];
print_r($coordinates);
$c = $b . ', ' . $a ;
?>
<!-- Создаём контейнер для карты -->
<div id="map" style="width: 600px; height: 400px"></div>
 
<!-- Создаём карту -->
<script type="text/javascript">
    // Функция ymaps.ready() будет вызвана, когда
    // загрузятся все компоненты API, а также когда будет готово DOM-дерево.
    ymaps.ready(init);
 
    function init() {
        // Создание карты.
        // https://tech.yandex.ru/maps/doc/jsapi/2.1/dg/concepts/map-docpage/
        var myMap = new ymaps.Map("map", {
            // Координаты центра карты.
            // Порядок по умолчнию: «широта, долгота».
            center: [<?php echo $c; ?>],
            // Уровень масштабирования. Допустимые значения:
            // от 0 (весь мир) до 19.
            zoom: 12,
            // Элементы управления
            // https://tech.yandex.ru/maps/doc/jsapi/2.1/dg/concepts/controls/standard-docpage/
            controls: [
 
                'zoomControl', // Ползунок масштаба
                'rulerControl', // Линейка
                'routeButtonControl', // Панель маршрутизации
                'trafficControl', // Пробки
                'typeSelector', // Переключатель слоев карты
                'fullscreenControl', // Полноэкранный режим
 
                // Поисковая строка
                new ymaps.control.SearchControl({
                    options: {
                        // вид - поисковая строка
                        size: 'large',
                        // Включим возможность искать не только топонимы, но и организации.
                        provider: 'yandex#search'
                    }
                })
 
            ]
        });
 
        // Добавление метки
        // https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/Placemark-docpage/
        var myPlacemark = new ymaps.Placemark([<?php echo $c; ?>], {
            // Хинт показывается при наведении мышкой на иконку метки.
            hintContent: 'Содержимое всплывающей подсказки',
            // Балун откроется при клике по метке.
            balloonContent: 'Содержимое балуна'
        });
 
        // После того как метка была создана, добавляем её на карту.
        myMap.geoObjects.add(myPlacemark);
 
    }
</script>