Проблема с Google Maps JavaScript API

Я слежу за официальной документацией Google здесь: https://developers.google.com/maps/documentation/javascript/examples/map-simple.

Я пытаюсь настроить базовую карту, следуя приведенному выше руководству, но карта не отображается на странице. Для пояснения, JavaScript API карт был включен через мою учетную запись Google, и я проверил свой ключ API, который наверняка работает. Вот мой код:

<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <meta http-equiv = "X-UA-Compatible" content = "ie=edge">

    <title>Document</title>
</head>
<body>
    <h1>Google map API</h1>
    <div id = "map"></div>

</body>

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "app.js"></script>
<!-- async defer in first script tag if needed -->
<script src = "https://maps.googleapis.com/maps/api/js?key=MYAPIKEY&callback=initMap" async defer ></script>
</html>

JavaScript:

    var map;
    function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
            center: { lat: -34.397, lng: 150.644 },
            zoom: 10,
        });
        console.info("map", map);
    };

Вот скриншот вывода консоли: https://postimg.cc/p5PsjqP1 В консоли НЕТ ошибок, но консоль регистрирует переменную карты. Что мне здесь не хватает? Почему не отображается моя основная карта?

попробуйте указать высоту своего div, например <div id = "map" style = "height:500px"></div> - посмотрите, как на странице примера есть тег стиля, а комментарий в этом теге говорит Всегда устанавливайте высоту карты явно, чтобы определить размер div

— 04.11.2018 23:12

На этой странице есть пример, созданный с помощью jsfiddle, если вы хотите, чтобы ключ API работал с / рабочим примером. developers.google.com/maps/documentation/javascript/examples‌ /…

— 04.11.2018 23:12

Ух ты, высота - это все, что нужно. Спасибо, Браво!

— 04.11.2018 23:14

javascript google-api

04.11.2018 23:09

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Другие вопросы по теме

В скрипте Google есть способ ссылаться на конкретный лист вместо активного листа?

Получить текущее местоположение пользователя - Kotlin

Как мне прослушивать push-уведомления Google API?

Google Calendar API запрашивает авторизацию каждые два часа

Не получаю refresh_token от Google OAuth2 второй раз, хотя я передаю требуемые параметры

Неверный запрос 400 при запросе токена Google OAuth2, Java

Проверка подлинности Google API с помощью служебного ключа прошла успешно, но при последующих запросах по-прежнему отображается сообщение «401 Login Required»

ColdFusion Google OAuth получает токен доступа Ошибка подключения

Как превратить oAuth2 сервисов Google в доступ oAuth2 к API Google Рекламы

Файлы библиотеки PHP API Google. Get параллельно

Проблема с Google Maps JavaScript API

Другие вопросы по теме

Похожие вопросы