Google Maps API grey screen - tried everything

Question

I am working on analyzing homes for sale and trying to make them from and object. I've tried modifying the code with solutions from other posts, such as: correcting zoom, coordinates, etc. without any success. Hoping someone can figure this out since I've been at it for over a week.

I am working on a Google Appscript WebApp so I'm not sure if this is causing the errors.

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, lng: match.lon},
     content: ""+match.address+""     
     }
  
  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: ""+c.address+" ("+c.distance+" miles away)",
       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);
    })
}

I've tried renaiming the keys from center, position, content to setCenter, setPosition, setContent when I got an error on console but I don't think that's right so I've changed to how the Google documentation has it.

I've tried changing the size of the div and overflow:display but nothing. Any other ideas that can help me get this going? No errors show up on my console so I'm not getting any feedback from Google Maps API....

finiteloop · Accepted Answer

@haby22. As mentioned in my comments above, in your options you have 'enter' instead of 'center'. You also have 'lgn' instead of 'lng' for longitude in your center settings, and also in your coords.

I also noticed that your match and comp objects were missing commas, so I added them to my example.

I also read that you can pass latitude and longitude as a string then convert to parse to float. So I have done that also.

I commented out your var comps = match.comps.map function because I do not see the code for comps.

EDIT I added this code back based on feedback just for future reference and to follow Bill & Ted's code of excellence. ;)

I also do not have the code you click on so I added an H2 that you can click for the map to appear.

Not sure if this is what you are looking for but here goes nothing:





  
  
  
  
  



    Display

Google Maps API grey screen - tried everything

Answers (1)

Related Questions