Monday, May 20, 2024
 Popular · Latest · Hot · Upcoming
159
rated 0 times [  161] [ 2]  / answers: 1 / hits: 95711  / 7 Years ago, tue, march 21, 2017, 12:00:00

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 contentwidth=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>

More From » jquery

 Answers
32

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'), {


[#58472] Friday, March 17, 2017, 7 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
patienceannel

Total Points: 674
Total Questions: 101
Total Answers: 101

Location: Northern Mariana Islands
Member since Fri, Jan 15, 2021
3 Years ago
patienceannel questions
Fri, Mar 11, 22, 00:00, 2 Years ago
Tue, Oct 20, 20, 00:00, 4 Years ago
Wed, Jul 24, 19, 00:00, 5 Years ago
;