Несколько местоположений в Google Map API не работают - PullRequest
Новая
       5

Несколько местоположений в Google Map API не работают

0 голосов
/ 01 октября 2018

Я использую Google MAP API для отображения нескольких местоположений на карте Google, я также сгенерировал ключ, но когда я запускаю этот код, он выдает ошибку uncaught exception: InvalidValueError: myMap is not a function.

Я сделал что-то неправильнопуть.Любая причина, почему я получаю эту ошибку

Введите ниже код взят из w3schools.com 

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Multiple Markers</title> 

  <!-- <script src="http://maps.google.com/maps/api/js?sensor=false"      type="text/javascript"></script>  -->
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap" type="text/javascript"></script> 
</head> 
<body>
  <div id="map" style="width: 500px; height: 400px;"></div>

  <script type="text/javascript">
    function myMap() {

    var locations = [
      ['Bondi Beach', -33.890542, 151.274856, 4],
      ['Coogee Beach', -33.923036, 151.259052, 5],
      ['Cronulla Beach', -34.028249, 151.157507, 3],
      ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
      ['Maroubra Beach', -33.950198, 151.259302, 1]
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: new google.maps.LatLng(-33.92, 151.25),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }

    }




      </script>

</body>
</html>

ОБНОВЛЕНИЕ

и если я использую этот учебник с моим API_KEY, он работает, но отображается только для версии для разработчиков.https://github.com/taniarascia/googlemaps

1 Ответ

0 голосов
/ 01 октября 2018

Вы должны переместить эту строку

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap" type="text/javascript"></script>

после выполнения функции myMap.Вы можете поместить его как последний элемент в теге <body></body>.

или , вы можете оставить его там, где он есть, удалить callback=myMap из вызова API и вызвать его вручную вваш сценарий.

Также есть большая вероятность, что вы не можете использовать этот ключ.Не используйте ключ (вы получите карту «только для разработки») и не создавайте свой собственный ключ в консоли разработчика. 

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <title>Google Maps Multiple Markers</title>
</head>

<body>
  <div id="map" style="width: 500px; height: 400px;"></div>

  <script type="text/javascript">
    function myMap() {

      var locations = [
        ['Bondi Beach', -33.890542, 151.274856, 4],
        ['Coogee Beach', -33.923036, 151.259052, 5],
        ['Cronulla Beach', -34.028249, 151.157507, 3],
        ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
        ['Maroubra Beach', -33.950198, 151.259302, 1]
      ];

      var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: new google.maps.LatLng(-33.92, 151.25),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      });

      var infowindow = new google.maps.InfoWindow();

      var marker, i;

      for (i = 0; i < locations.length; i++) {
        marker = new google.maps.Marker({
          position: new google.maps.LatLng(locations[i][1], locations[i][2]),
          map: map
        });

        google.maps.event.addListener(marker, 'click', (function(marker, i) {
          return function() {
            infowindow.setContent(locations[i][0]);
            infowindow.open(map, marker);
          }
        })(marker, i));
      }

    }
  </script>
  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&callback=myMap" type="text/javascript"></script>
</body>

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

Похожие темы

...