API Google Maps JS не отображается - ошибок нет - PullRequest
Новая
       9

API Google Maps JS не отображается - ошибок нет

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

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

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    
    <style>
      #map {
        height: 100px;
        width: 100px;
      }
      html, body {
        height: 100px;
        width: 100px;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  
  <body>
    <div id="map" style="width:100px; height:100px"></div>
    
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap" async defer></script>
    
    <script>
        var mLocations = null;
                
        function initMap() {
            var lLocations
            var marker, i;
            var infowindow = new google.maps.InfoWindow({});
        
            $.getJSON("", function(pLocations) {
                mLocations = pLocations;
                
                for (i = 0; i < pLocations.length; i++) {
                    marker = new google.maps.Marker({
                        position: new google.maps.LatLng(pLocations[i].lat, pLocations[i].lon),
                        map: map
                    });
                    
                    google.maps.event.addListener(marker, 'Click', (function (marker, i) {
                        return function () {
                            infowindow.setContent(mLocations[i].info);
                            infowindow.open(map, marker);
                        }
                    }) (marker, i));
                };
        
                var map = new google.maps.Map(document.getElementById('map'), {
                    zoom: 20,
                    center: new google.maps.LatLng(lLocations[1].lat, lLocations[1].lon),
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                });
            });
        }
    </script>
  </body>
</html>

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

Ответы [ 2 ]

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

Я использую макеты, чтобы показать булавки на карте. Просто замените фиктивное местоположение на API call.

Попробуйте приведенный ниже фрагмент кода. 

var mLocations = null;

function initMap() {
  var lLocations
  var marker, i;
  var infowindow = new google.maps.InfoWindow({});

  var pLocations = [{
      lat: -25.363,
      lon: 131.044
    },
    {
      lat: -25.34470,
      lon: 131.05121
    },
    {
      lat: -25.33259,
      lon: 131.02615
    },
    {
      lat: -25.34501,
      lon: 131.01001
    }
  ];


  //  $.getJSON("polarServer.asp?Screen=GetBlobScript&Script=LocationMap_GetMapData&SID=<%Context.WebSession.SessionIDcode%>", function(pLocations) {
  mLocations = pLocations;

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 15,
    center: new google.maps.LatLng(pLocations[1].lat, pLocations[1].lon),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

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

    google.maps.event.addListener(marker, 'Click', (function(marker, i) {
      return function() {
        infowindow.setContent(pLocations[i].info);
        infowindow.open(map, marker);
      }
    })(marker, i));
  };


  //});
}
html, body {
        height: 100%;
 }
      
#map {
        height: 550px;
        width: 100%;
 }
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD0lvijQDmjbI8uHMbF8M0pYuaA84HBCsc&callback=initMap" async defer></script>
  </head>
  
  <body>
    <div id="map"></div>
        
  </body>
</html>
0 голосов
/ 30 октября 2018

Я вижу по крайней мере несколько вопросов здесь:

  1. вы используете переменную map в цикле for перед его инициализацией. Я бы инициализировал карту вне обратного вызова getJSON;
  2. Вы не установили опцию центра;
  3. вы можете не увидеть карту, если $ .getJSON не удастся - используйте console.log или точки останова, чтобы увидеть, оцениваются ли все ожидаемые вами строки;
  4. вы не импортируете jQuery для использования $ .getJSON

попробуйте эту обновленную initMap функцию: 

function initMap() {
    var marker, i;

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

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

    $.ajax({
        url: "polarServer.asp?Screen=GetBlobScript&Script=LocationMap_GetMapData&SID=<%Context.WebSession.SessionIDcode%>",
        dataType: 'json',
        success: function(pLocations) {
            if (pLocations instanceof Array) {
                for (i = 0; i < pLocations.length; i++) {
                    marker = new google.maps.Marker({
                        position: new google.maps.LatLng(pLocations[i].lat, pLocations[i].lon),
                        map: map
                    });

                    google.maps.event.addListener(marker, 'Click', function () {
                        infowindow.setContent(pLocations[i].info);
                        infowindow.open(map, marker);
                    });
                }

                if (pLocations.length > 0) {
                    map.setCenter(new google.maps.LatLng(pLocations[0].lat, pLocations[0].lon));
                }
            } else {
                console.error("serve response is not an Array");
            }
        },
        error: function(err){
            console.error("Failed to get the data: ", err);
        }
    });
}

и убедитесь, что JQuery встроен в ваш код

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

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

...