Uncaught TypeError: Cannot read property 'firstChild' of null (Google maps failing to load)

Question

I was wondering if someone would be able to lend me their knowledge involving the Google Maps API. I've read similar questions and still haven't been able to come up with an answer. As the title says the error showing up in my browser console is:

Uncaught TypeError: Cannot read property 'firstChild' of null

I understand that this means there is an issue with the way values are being passed around; Following is my relevant code snippets where sources points to in Chrome:

// --- Global Variable
var map;


// --- View Model.
function AppViewModel() {

  // Initial Map
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 39.305, long: -76.617},
    zoom: 12
  });


// --- Initalize Application.
function initApp() {
  ko.applybindings(new AppViewModel());
}

The error appears to be thrown when Google Maps attempts to load. Does anyone have an idea as to what I'm doing wrong here? Thanks for any help offered.

Html for reference:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Bolton Hill Neighborhood Map</title>
  <link rel="stylesheet" href="static/main.css">
  <meta name="viewport" content"width=device-width, initial-scale=1">
</head>
<body>
 <div class='map'>maps error</div>

  <script src="./js/knockout.js"></script>
  <script src="./js/jquery.min.js"></script>
  <script src="./js/app.js"></script>
  <script async defer src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX&callback=initApp" onerror="errorHandler"></script>
</body>
</html>

Unable to find map id – Khurshid Ansari Mar 07 '18 at 08:27 — Khurshid Ansari, Mar 07 '18 at 08:27

score 62 · Accepted Answer · edited Oct 08 '19 at 11:56

62

I think center: {lat: 39.305, long: -76.617}, with long is not correct.
You should define latlng like this:

var latlng = new google.maps.LatLng(39.305, -76.617);
map = new google.maps.Map(document.getElementById('map'), {
  center: latlng,
  zoom: 12
});

and

Uncaught TypeError: Cannot read property 'firstChild' of null

Error message usually occurs when the maps container does not exist:

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

edited Oct 08 '19 at 11:56

ESP32

8,089
2
40
61

answered Mar 21 '17 at 06:39

Hua Trung

1,899
13
11

I changed `long` to `lng` and that didn't seem to change anything. I am writing the javascript for my initial map straight from this guide: https://developers.google.com/maps/documentation/javascript/examples/map-simple – Calvin Ellington Mar 21 '17 at 12:55
8

u put `class='map'` it wrong, u need change to this: `
maps error
` – Hua Trung Mar 21 '17 at 13:14
6

this was my issue `map = new google.maps.Map(document.getElementById('id_that_does_notexist'), {` – Siddharth Jan 09 '18 at 20:38
Hmm, this doesn't solve my issue either. I have an id="map" and in the javascript code "var map = new google.maps.Map(document.getElementById('map'), " - but still this error is present – FortuneSoldier Aug 01 '18 at 12:24
please give more informations, press F12 to view console log and copy that error here or full html and javascript? – Hua Trung Aug 01 '18 at 12:33
my "map" id exist and i have done code change but error is present. – Heemanshu Bhalla Jan 18 '20 at 07:42
@HeemanshuBhalla please give me more code and error console to find out what it is. – Hua Trung Feb 17 '20 at 10:08
@HuaTrung Thank you. But, i got it resolved. i was initializing map before loading of map library. i corrected my js loading order and it fixed. – Heemanshu Bhalla Feb 17 '20 at 12:46

Uncaught TypeError: Cannot read property 'firstChild' of null (Google maps failing to load)

1 Answers1