Google не определен, несмотря на то, что API уже включен - PullRequest
Новая
       1

Google не определен, несмотря на то, что API уже включен

0 голосов
/ 09 февраля 2019

Я понятия не имею, почему он продолжает говорить, что Google не определен.Кто-нибудь знает проблему?

Я уже пытался переместить скрипт в голову, и все, но здесь по-прежнему бесполезно. 

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 2,
          center: new google.maps.LatLng(2.8,-187.3),
          mapTypeId: 'terrain'
        });
      }
      // Loop through the results array and place a marker for each
      // set of coordinates.
      function loop() {
        var lati=JSON.parse(localStorage.getItem("lat2"))
        console.log("Hi")
        console.log(lati)
        for (var i = 0; i < lati.length; i++) {
          var coords = lati[i]
          var latLng = {lat: (coords[0]), lng:(coords[1])};
          var marker = new google.maps.Marker({
            position: latLng,
            map: map
          });
        }
      }
      loop()
    </script>
    <script async defer 
      src="https://maps.googleapis.com/maps/api/js?key=THEAPIKEY=initMap">
    </script>
  </body>
</html>

Я хотел, чтобы он зацикливался на том, что есть в моемлокальное хранилище

Ответы [ 2 ]

0 голосов
/ 09 февраля 2019

Вы загружаете API Google Maps Javascript асинхронно (с async defer).API не будет доступен (google будет неопределенным), пока не завершится загрузка.В это время он запустит вашу функцию обратного вызова (initMap).

Описания в документации API:

Переместите вызов функции loop внутрь initMap (или загрузите API синхронно).

подтверждение концепции скрипта

фрагмент кода: (примечание не будет читать localStorage из-за песочницы) 

#map {
  height: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
<div id="map"></div>
<script>
  var map;

  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      zoom: 2,
      center: new google.maps.LatLng(2.8, -187.3),
      mapTypeId: 'terrain'
    });
    loop()
  }

  // Loop through the results array and place a marker for each
  // set of coordinates.
  function loop() {
    var lati = JSON.parse(localStorage.getItem("lat2"))
    console.log("Hi")
    console.log(lati)
    for (var i = 0; i < lati.length; i++) {
      var coords = lati[i]
      var latLng = {
        lat: (coords[0]),
        lng: (coords[1])
      };
      var marker = new google.maps.Marker({
        position: latLng,
        map: map
      });
    }
  }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
0 голосов
/ 09 февраля 2019

No.1) Ваш браузер не знает, что такое google, потому что переменная google будет определена в следующем скрипте.Поместите ваш <script> с initMap функциями и т. Д. после скрипта "google" <script async defer src="https://maps.googleapis.com/maps/api/js key=....&callback=initMap"> </script>.

No.2) Может быть полезно запустить код после того, как страницаполностью загружен.Вы можете использовать document.addEventListener('DOMContentLoaded', function() { //your code here }) или библиотеки типа jQuery, чтобы сделать это.

PS В целом, будьте осторожнее с вашими ключами API.Не публикуйте их

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...