Почему не отображаются Яндекс Карты на сайте?

Question

Пишу сайт-приглашение на свадьбу, используя готовый проект https://github.com/rampatra/wedding-website. В оригинале используются Гугл Карты, но я хотел бы Яндекс. Изменив код на тот, который должен вызывать непосредственно карты Яндекса, наблюдаю, что они не отображаются. Уже много чего перепробовал, но так и не смог добиться желаемого результата. Помогите, пожалуйста.

Куски кода, которые загружают API карт и заполняют сегмент сайта, index.html:

<!doctype html>
<html>
<head>

...

<script src="https://api-maps.yandex.ru/2.1/?apikey=***********&lang=ru_RU" type="text/javascript"></script>
    <script type="text/javascript">
    var map;
    var marker;

    ymaps.ready(function() {
        map = new ymaps.Map(document.getElementById("map-canvas"), {
            center: [***,***],
            zoom: 16,
            controls: ['routeButtonControl', 'geolocationControl']
        }, {
            searchControlProvider: 'yandex#search'
        });

        marker = new ymaps.GeoObject({
            geometry: {
                type: "Point",
                coordinates: [***,***]
            }
        });

        map.geoObjects.add(marker);
        )
    });
    </script>

...

<section id="map" class="section-padding">
    <div class="text-center">
        <h3>Место проведения</h3>
        <!--<p>It's way easier than you think!</p>-->
    </div>
    <div id="map-canvas"></div>

...

Кусок стилей под карту, styles.min.css:

#map-canvas{height:500px;width:100%}

Также прикладываю вырезанный ножницами а-ля скриншот сайта

Answer 1

Причина проблемы супер-простая - невнимательность. Была лишняя скобка:

        map.geoObjects.add(marker);
        )

В моем случае правильный вариант этих кусков файла:

<!doctype html>
<html>
<head>

...

<script src="https://api-maps.yandex.ru/2.1/?apikey=***********&lang=ru_RU" type="text/javascript"></script>
    <script type="text/javascript">
    var map;
    var marker;

    ymaps.ready(function() {
        map = new ymaps.Map(document.getElementById("map-canvas"), {
            center: [***,***],
            zoom: 16,
            controls: ['routeButtonControl', 'geolocationControl']
        }, {
            searchControlProvider: 'yandex#search'
        });

        marker = new ymaps.GeoObject({
            geometry: {
                type: "Point",
                coordinates: [***,***]
            }
        });

        map.geoObjects.add(marker);
    });
    </script>

...

<section id="map" class="section-padding">
    <div class="text-center">
        <h3>Место проведения</h3>
        <!--<p>It's way easier than you think!</p>-->
    </div>
    <div id="map-canvas"></div>

...

БЛОГ НА HUSL

Почему не отображаются Яндекс Карты на сайте?

Ответы (1 шт):