Google Maps API灰屏-尝试了一切

如何解决Google Maps API灰屏-尝试了一切

我正在分析待售房屋，并试图使房屋成为异议。我尝试使用其他帖子的解决方案来修改代码，例如：校正缩放，坐标等，但均未成功。希望有人可以解决这个问题，因为我已经呆了一个多星期了。

我正在使用Google Appscript WebApp，所以不确定是否引起错误。

HTML

<!DOCTYPE html>
<html>

<head>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <Meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <base target="_top">
  <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCoV68jYgCZRuOSao1VFcTJbAW4py7yycs&callback=displayMap"></script>
</head>
<body>
  <div class= "map" id="map-display">
</body>
</html>

CSS

.map{
 height: 400px;
 width: 100%;
 display: none; //initially hidden until the displayMap() function runs
}

JavaScript

// other javascript code goes here that produces the `match` results in the next function 
document.getElementById("analysis").addEventListener("click",displayMap); //when a table is clicked,then the map is meant to be displayed

var mapdisplay = document.getElementById("map-display");

let map;
function displayMap(){
  var match = {
    address: "2126 Daly St"
    baths: 1
    beds: 2
    built: 1910
    city: "Los Angeles"
    lat: 34.0702443
    lon: -118.2152669
    lotSize: 3920
    mls: 820000258
    price: 410000
    ref: 573
    state: "CA"
    status: "Active"
    url: "http://www.redfin.com/CA/Los-Angeles/2126-Daly-St-90031/home/6945566"
    zip: 90031
    }

  var compsList = [
    {address: "2315 Hancock St"
     baths: 2
     beds: 3
     city: "Los Angeles"
     lat: 34.0724244
     lon: -118.2093106
     lotSize: 5500
     mls: "RS20015393"
     price: 680000
     ref: 1505
     saleType: "PAST SALE"
     sf: 1169
     soldDate: "Thu Feb 20 2020 16:00:00 GMT-0800 (Pacific Standard Time)"
     state: "CA"
     status: "Sold"
     url: "http://www.redfin.com/CA/Los-Angeles/2315-Hancock-St-90031/home/6946949"
     zip: 90031
      },{address: "2333 Hancock St"
     baths: 2
     beds: 3
     city: "Los Angeles"
     lat: 34.0724248
     lon: -118.2093112
     lotSize: 5700
     mls: "RS20015394"
     price: 640000
     ref: 1510
     saleType: "PAST SALE"
     sf: 1171
     soldDate: "Thu Feb 2 2020 16:00:00 GMT-0800 (Pacific Standard Time)"
     state: "CA"
     status: "Sold"
     url: "http://www.redfin.com/CA/Los-Angeles/2333-Hancock-St-90031/home/6946949"
     zip: 90031
    }
  ];
  var compIcon = "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png";
  var options = {
       zoom: 8,center: {lat: match.lat,lng: match.lon},mapTypeId: "roadmap"
     }
  map = new google.maps.Map(mapdisplay,options);

  var active = {
     coords: {lat: match.lat,content: "<h2><a href='"+match.url+"' target='_blank'>"+match.address+"</a></h2>"     
     }
  
  addMarkers(active)  //function should center the map around active and place the "compList" items with a beachflag
  
  var comps = compsList.map(function(c){ //function changes the array to keep only the key/objects needed for the map
     var reformat = {
       coords: {lat: c.lat,lng: c.lon},content: "<h2><a href="+c.url+" target='_blank'>"+c.address+" ("+c.distance+" miles away)</a></h2>",icon: compIcon
     }
     return reformat
   }).forEach(function(r){ addMarkers(r) }) //send each of the two beach flags to be displayed on map along with the center

   mapdisplay.style.display = "inline-block";
}

function addMarkers(props){
  var marker = new google.maps.Marker({
    position: props.coords,map: map   
  })
  
  if(props.icon){
    marker.setIcon(props.icon)
  }
  
  if(props.content){
    var infoWindow = new google.maps.InfoWindow({
      content: props.content
    });
    
    marker.addListener("click",function(){ 
      infoWindow.open(map,marker);
    })
}

我尝试从center，position，content到setCenter，setPosition，setContent的键重命名console出现错误，但我认为这是不对的，因此我已更改为Google文档的方式。

我尝试更改div和overflow:display的大小，但没有任何改变。还有其他可以帮助我解决这个问题的想法吗？控制台上未显示任何错误，因此我没有收到Google Maps API的任何反馈...。

解决方法

@ haby22。正如我在上面的评论中所提到的，在您的选择中，您具有“输入”而不是“中心”。在中心设置和座标中，经度也用'lgn'代替'lng'。

我还注意到您的match和comp对象缺少逗号，因此我将其添加到示例中。

我还读到您可以将纬度和经度作为字符串传递，然后转换为浮点型解析。所以我也做到了。

我注释掉了您的var comps = match.comps.map函数，因为看不到补偿代码。

编辑，我根据反馈添加了此代码，以供将来参考，并遵循Bill＆Ted的卓越代码。 ;）

我也没有您单击的代码，所以我添加了一个H2，您可以单击它以显示地图。

不确定这是否是您要寻找的东西，但是什么也没做：

<!DOCTYPE html>
<html>

<head>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <base target="_top">
  <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCoV68jYgCZRuOSao1VFcTJbAW4py7yycs"></script>
<style>
    .map{
 height: 400px;
 width: 100%;
 display: none; 
 /* initially hidden until the displayMap() function runs */
}
</style>
</head>
<body>
    <h2 id="analysis">Display</h2>
  <div class= "map" id="map-display"></div>

     

    <script>
        // other javascript code goes here that produces the `match` results in the next function 
document.getElementById("analysis").addEventListener("click",displayMap); //when a table is clicked,then the map is meant to be displayed

let mapDisplay = document.getElementById("map-display");

let map;
function displayMap(){
  var match = {
    address: "2126 Daly St",baths: 1,beds: 2,built: 1910,city: "Los Angeles",lat: "34.0702443",lon: "-118.2152669",lotSize: 3920,mls: 820000258,price: 410000,ref: 573,state: "CA",status: "Active",url: "http://www.redfin.com/CA/Los-Angeles/2126-Daly-St-90031/home/6945566",zip: 90031,}

  var compsList = [
    {address: "2315 Hancock St",baths: 2,beds: 3,lat: "34.0724244",lon: "-118.2093106",lotSize: 5500,mls: "RS20015393",price: 680000,ref: 1505,saleType: "PAST SALE",sf: 1169,soldDate: "Thu Feb 20 2020 16:00:00 GMT-0800 (Pacific Standard Time)",status: "Sold",url: "http://www.redfin.com/CA/Los-Angeles/2315-Hancock-St-90031/home/6946949",},{address: "2333 Hancock St",lat: "34.0724248",lon: "-118.2093112",lotSize: 5700,mls: "RS20015394",price: 640000,ref: 1510,sf: 1171,soldDate: "Thu Feb 2 2020 16:00:00 GMT-0800 (Pacific Standard Time)",url: "http://www.redfin.com/CA/Los-Angeles/2333-Hancock-St-90031/home/6946949",}
  ];
  var compIcon = "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png";
  
  
  var options = {
       zoom: 8,center: {lat: parseFloat(match.lat),lng: parseFloat(match.lon)},mapTypeId: "roadmap"
     }

  map = new google.maps.Map(mapDisplay,options);



  var active = {
     coords: {lat: parseFloat(match.lat),content: "<h2><a href='"+match.url+"' target='_blank'>"+match.address+"</a></h2>"     
     }
  
  addMarkers(active)  //function should center the map around active and place the "compList" items with a beachflag
  
  
  var comps = compsList.map(function(c){ //function changes the array to keep only the key/objects needed for the map
     var reformat = {
       coords: {lat: parseFloat(c.lat),lng: parseFloat(c.lon)},content: "<h2><a href="+c.url+" target='_blank'>"+c.address+" ("+c.distance+" miles away)</a></h2>",icon: compIcon
     }
     return reformat
   }).forEach(function(r){ addMarkers(r) }) //send each of the two beach flags to be displayed on map along with the center

   mapDisplay.style.display = "inline-block";
}

function addMarkers(props){
  var marker = new google.maps.Marker({
    position: props.coords,map: map   
  })
  
  if(props.icon){
    marker.setIcon(props.icon)
  }
  
  if(props.content){
    var infoWindow = new google.maps.InfoWindow({
      content: props.content
    });
    
    marker.addListener("click",function(){ 
      infoWindow.open(map,marker);
    })
}
}
    </script>
</body>
</html>

Google Maps API灰屏-尝试了一切

如何解决Google Maps API灰屏-尝试了一切

解决方法

相关推荐