Подтвердить что ты не робот

Google Maps v3 api для локального хоста не работает

Мне хотелось попробовать демонстрационную версию Gmaps v3 и попробовать этот пример из документации Google, но нет выхода, страница просто загружается в течение нескольких секунд, а затем пустая, без вывода.

<!DOCTYPE html>
<html lang = "en">
<head>
    <style type="text/css">
        html{height: 100%}
        body{height: 100%; margin: 0; padding: 0}
        #map-canvas{height: 100%}
    </style>
    <title>GMaps Demo</title>
    <script src = "https://maps.googleapis.com/maps/api/js?
                   key=${API_KEY}&sensor=false">
    </script>
    <script>
        function initialize(){
            var mapOptions = {
                center: new google.maps.LatLng(-34.397, 150.644),
                zoom: 8,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = google.maps.Map(
                      document.getElementById("map-canvas"),
                      mapOptions);
        }

        google.maps.event.addDomListener(window, 'load', initialize);
        </script>
</head>
<body>
    <div id = "map-canvas">
    </div>
</body>
</html>
4b9b3361

Ответ 1

Прежде всего: Google Maps 3 больше не нужен ключ api, поэтому вы в порядке с

https://maps.googleapis.com/maps/api/js?sensor=false

в качестве URL-адреса. Забастовкa >

(Как отметил Джефф Хой, с 22 июня 2016 года снова требуется ключ API.)

И затем вы забыли "новое" в этой строке:

var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

С этими изменениями отобразится ваша карта.

Ответ 3

Это очень просто! в новом коде API вы должны ввести своих рефереров. Итак, для вашего теста localhost:

ОСТАВЬТЕ ЭТО ПОЯВЛЕНИЕ

здесь также объяснение google api:

 Accept requests from these HTTP referrers (web sites) (Optional)
 Use asterisks for wildcards. 

Если вы оставите этот пробел, запросы будут приниматься от любого реферера.
   Обязательно добавьте источники, прежде чем использовать этот ключ в производстве.