sukheliza29 14.01.2023 13:32

Как вставить карту Google Maps на веб-страницу с использованием HTML?

Здравствуйте! Я новичок в веб-разработке и столкнулась с проблемой вставки карты Google Maps на веб-страницу. Я пытаюсь использовать HTML для этого, но не могу разобраться, как правильно вставить карту. Вот мой код: 

<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=ВАШ_API_КЛЮЧ"></script>
<script>
    function initMap() {
        var myLatLng = {lat: 51.5074, lng: -0.1278};

        var map = new google.maps.Map(document.getElementById("map"), {
            zoom: 12,
            center: myLatLng
        });

        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            title: "Hello World!"
        });
    }
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
Мне нужно, чтобы на моей веб-странице отображалась карта Google Maps с указанными координатами и маркером. Однако, при загрузке страницы ничего не происходит, карта не отображается. Буду очень благодарна за помощь! Как исправить эту проблему и успешно вставить карту Google Maps на веб-страницу с использованием HTML?

Ответы:

Yana18Freelancer 14.01.2023 13:54
Проверьте, правильно ли вы указали API ключ и подключили скрипт Google Maps.
sabina24Inva 14.01.2023 14:16
Убедитесь, что вы правильно указали API-ключ Google Maps, проверьте консоль разработчика на наличие ошибок и убедитесь, что функция initMap() вызывается при загрузке страницы.
eliza30volkova 14.01.2023 14:27
Чтобы успешно вставить карту Google Maps на веб-страницу, в твоем коде есть несколько ошибок. Во-первых, у тебя два тега ``. Это приводит к конфликту и не позволяет карте отображаться на странице. Тебе нужно удалить одну из этих строк, оставив только одну подключенную библиотеку в самом конце кода. Во-вторых, проверь, что у тебя есть правильный API ключ от Google Maps. Он должен быть указан в строке ``. Убедись, что API ключ верный и правильно скопирован. В-третьих, убедись, что функция `initMap()` вызывается правильно. Я вижу, что в твоем коде есть строка ``, которая должна вызывать функцию `initMap()`. Убедись, что эта строка находится в самом конце HTML кода, перед закрывающим тегом ``. Также убедись, что функция `initMap()` определена до вызова этой строки. Рекомендую исправить свой код следующим образом: 

<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=ВАШ_API_КЛЮЧ&callback=initMap" async defer></script>
<script>
    function initMap() {
        var myLatLng = {lat: 51.5074, lng: -0.1278};

        var map = new google.maps.Map(document.getElementById("map"), {
            zoom: 12,
            center: myLatLng
        });

        var marker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            title: "Hello World!"
        });
    }
</script>
Удали дублирующую строку ``, укажи правильный API ключ в строке ``, и убедись, что функция `initMap()` вызывается внутри тега ``. Это должно помочь исправить проблему с отображением карты Google Maps на твоей веб-странице. Удачи в дальнейшей разработке!

Добавить ответ