Не удается получить API карт Google при загрузке HTML - PullRequest
Новая
       80

Не удается получить API карт Google при загрузке HTML

0 голосов
/ 29 января 2020

Я пытаюсь запустить API карт Google на своей странице контактов для сайта из мобильного шаблона Blix , но я считаю, что поскольку страница контактов загружается поверх главной страницы или из-за пользовательских сценарии, которые имеют источник для API MAP, вообще не вызываются. Я знаю, что код, который я хочу запустить, не является проблемой, но мой скрипт вообще не вызывается в моем шаблоне, и я не знаю, что попробовать, так как я новичок.

Вы здесь можно найти самого сайта. У меня проблема с контактной страницей. 

        #map{
            height: 80%;
            width: 80%;
        }
        html,body{
            height: 100%;
            margin: 0;
            padding:0;
        }
        <div id="map">
<script>
            console.log("test 1");
          var map;
          function initMap() {
          map = new google.maps.Map(
              document.getElementById('map'),
        
              {center: new google.maps.LatLng(40, 20), zoom: 16});
              console.log("test 2");
        
          var iconBase =
              'https://developers.google.com/maps/documentation/javascript/examples/full/images/';
              console.log("test 3");
        
          var icons = {
            info: {
              icon: iconBase + 'info-i_maps.png'
            }
          };
              console.log("test 4");
        
          var features = [
            {
              position: new google.maps.LatLng(40, 20),
              type: 'info'
            }
          ];
              console.log("test 5");
        
          // Create markers.
          for (var i = 0; i < features.length; i++) {
            var marker = new google.maps.Marker({
              position: features[i].position,
              icon: icons[features[i].type].icon,
              map: map
            });
          };
            console.log("test 6");
        }
        </script>
        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCg9sodxDOjqPW1H5Xkmqu1ed1TPDVt1E0&callback=initMap"></script>

Ответы [ 3 ]

1 голос
/ 29 января 2020

Вы должны загрузить скрипт скриптов до фактического JS, а затем вызвать функцию в конце нижней части в JS, поэтому, пожалуйста, используйте: 

#map {
  height: 80%;
  width: 80%;
}

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

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCg9sodxDOjqPW1H5Xkmqu1ed1TPDVt1E0"></script>

<script>
  var map;

  function initMap() {
    map = new google.maps.Map(
      document.getElementById('map'),

      {
        center: new google.maps.LatLng(40, 20),
        zoom: 16
      });

    var iconBase =
      'https://developers.google.com/maps/documentation/javascript/examples/full/images/';

    var icons = {
      info: {
        icon: iconBase + 'info-i_maps.png'
      }
    };

    var features = [{
      position: new google.maps.LatLng(40, 20),
      type: 'info'
    }];

    // Create markers.
    for (var i = 0; i < features.length; i++) {
      var marker = new google.maps.Marker({
        position: features[i].position,
        icon: icons[features[i].type].icon,
        map: map
      });
    };
  }

  initMap();
</script>
0 голосов
/ 29 января 2020

Вот полный HTML Файл: 

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8" />

  <style>
    #map {
      height: 80%;
      width: 80%;
    }
    
    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body>
  <div id="map"></div>

  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCg9sodxDOjqPW1H5Xkmqu1ed1TPDVt1E0"></script>

  <script>
    var map;

    function initMap() {
      map = new google.maps.Map(
        document.getElementById('map'),

        {
          center: new google.maps.LatLng(40, 20),
          zoom: 16
        });

      var iconBase = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/';

      var icons = {
        info: {
          icon: iconBase + 'info-i_maps.png'
        }
      };

      var features = [{
        position: new google.maps.LatLng(40, 20),
        type: 'info'
      }];

      // Create markers.
      for (var i = 0; i < features.length; i++) {
        var marker = new google.maps.Marker({
          position: features[i].position,
          icon: icons[features[i].type].icon,
          map: map
        });
      };
    }

    initMap();
  </script>
</body>

</html>
0 голосов
/ 29 января 2020

Вы добавили карту div внизу тела HTML. Добавьте <div id="map"> внутри страницы контактов.

...