Uncaught TypeError: Cannot read property 'firstChild' of null (Google maps failing to load) [duplicate]
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
This question already has an answer here:
Google MAP API Uncaught TypeError: Cannot read property 'offsetWidth' of null
25 answers
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>
javascript jquery google-maps
edited Sep 5 '18 at 13:16
1stthomas
64221019
asked Mar 21 '17 at 3:04
Calvin EllingtonCalvin Ellington
3331516
marked as duplicate by Samuel Liew♦ javascript
Users with the javascript badge can single-handedly close javascript questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
May 4 '17 at 2:35
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
add a comment |
This question already has an answer here:
Google MAP API Uncaught TypeError: Cannot read property 'offsetWidth' of null
25 answers
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>
javascript jquery google-maps
edited Sep 5 '18 at 13:16
1stthomas
64221019
asked Mar 21 '17 at 3:04
Calvin EllingtonCalvin Ellington
3331516
marked as duplicate by Samuel Liew♦ javascript
Users with the javascript badge can single-handedly close javascript questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
May 4 '17 at 2:35
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
Unable to find map id
– Khurshid Ansari
Mar 7 '18 at 8:27
add a comment |
This question already has an answer here:
Google MAP API Uncaught TypeError: Cannot read property 'offsetWidth' of null
25 answers
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>
javascript jquery google-maps
edited Sep 5 '18 at 13:16
1stthomas
64221019
asked Mar 21 '17 at 3:04
Calvin EllingtonCalvin Ellington
3331516
This question already has an answer here:
Google MAP API Uncaught TypeError: Cannot read property 'offsetWidth' of null
25 answers
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>
This question already has an answer here:
Google MAP API Uncaught TypeError: Cannot read property 'offsetWidth' of null
25 answers
javascript jquery google-maps
javascript jquery google-maps
edited Sep 5 '18 at 13:16
1stthomas
64221019
asked Mar 21 '17 at 3:04
Calvin EllingtonCalvin Ellington
3331516
edited Sep 5 '18 at 13:16
1stthomas
64221019
asked Mar 21 '17 at 3:04
Calvin EllingtonCalvin Ellington
3331516
edited Sep 5 '18 at 13:16
1stthomas
64221019
edited Sep 5 '18 at 13:16
1stthomas
64221019
edited Sep 5 '18 at 13:16
1stthomas
64221019
64221019
asked Mar 21 '17 at 3:04
Calvin EllingtonCalvin Ellington
3331516
asked Mar 21 '17 at 3:04
Calvin EllingtonCalvin Ellington
3331516
asked Mar 21 '17 at 3:04
Calvin EllingtonCalvin Ellington
3331516
3331516
marked as duplicate by Samuel Liew♦ javascript
Users with the javascript badge can single-handedly close javascript questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
May 4 '17 at 2:35
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
marked as duplicate by Samuel Liew♦ javascript
Users with the javascript badge can single-handedly close javascript questions as duplicates and reopen them as needed.
StackExchange.ready(function() {
if (StackExchange.options.isMobile) return;
$('.dupe-hammer-message-hover:not(.hover-bound)').each(function() {
var $hover = $(this).addClass('hover-bound'),
$msg = $hover.siblings('.dupe-hammer-message');
$hover.hover(
function() {
$hover.showInfoMessage('', {
messageElement: $msg.clone().show(),
transient: false,
position: { my: 'bottom left', at: 'top center', offsetTop: -7 },
dismissable: false,
relativeToBody: true
});
},
function() {
StackExchange.helpers.removeMessages();
}
);
});
});
May 4 '17 at 2:35
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
Unable to find map id
– Khurshid Ansari
Mar 7 '18 at 8:27
add a comment |
Unable to find map id
– Khurshid Ansari
Mar 7 '18 at 8:27
Unable to find map id
– Khurshid Ansari
Mar 7 '18 at 8:27
Unable to find map id
– Khurshid Ansari
Mar 7 '18 at 8:27
add a comment |
1 Answer
1
active
oldest
votes
I think center: {lat: 39.305, long: -76.617}, with long not right.
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
map = new google.maps.Map(document.getElementById('id_that_does_notexist'), {
edited May 22 '18 at 13:48
Siddharth
6,573964111
answered Mar 21 '17 at 6:39
Hua TrungHua Trung
1,519910
I changedlongtolngand that didn't seem to change anything. I am writing the javascript for my initial map straight from this guide: developers.google.com/maps/documentation/javascript/examples/…
– Calvin Ellington
Mar 21 '17 at 12:55
8
u putclass='map'it wrong, u need change to this:<div id='map'>maps error</div>
– Hua Trung
Mar 21 '17 at 13:14
5
this was my issuemap = new google.maps.Map(document.getElementById('id_that_does_notexist'), {
– Siddharth
Jan 9 '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 1 '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 1 '18 at 12:33
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
I think center: {lat: 39.305, long: -76.617}, with long not right.
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
map = new google.maps.Map(document.getElementById('id_that_does_notexist'), {
edited May 22 '18 at 13:48
Siddharth
6,573964111
answered Mar 21 '17 at 6:39
Hua TrungHua Trung
1,519910
I changedlongtolngand that didn't seem to change anything. I am writing the javascript for my initial map straight from this guide: developers.google.com/maps/documentation/javascript/examples/…
– Calvin Ellington
Mar 21 '17 at 12:55
8
u putclass='map'it wrong, u need change to this:<div id='map'>maps error</div>
– Hua Trung
Mar 21 '17 at 13:14
5
this was my issuemap = new google.maps.Map(document.getElementById('id_that_does_notexist'), {
– Siddharth
Jan 9 '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 1 '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 1 '18 at 12:33
add a comment |
I think center: {lat: 39.305, long: -76.617}, with long not right.
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
map = new google.maps.Map(document.getElementById('id_that_does_notexist'), {
edited May 22 '18 at 13:48
Siddharth
6,573964111
answered Mar 21 '17 at 6:39
Hua TrungHua Trung
1,519910
I changedlongtolngand that didn't seem to change anything. I am writing the javascript for my initial map straight from this guide: developers.google.com/maps/documentation/javascript/examples/…
– Calvin Ellington
Mar 21 '17 at 12:55
8
u putclass='map'it wrong, u need change to this:<div id='map'>maps error</div>
– Hua Trung
Mar 21 '17 at 13:14
5
this was my issuemap = new google.maps.Map(document.getElementById('id_that_does_notexist'), {
– Siddharth
Jan 9 '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 1 '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 1 '18 at 12:33
add a comment |
I think center: {lat: 39.305, long: -76.617}, with long not right.
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
map = new google.maps.Map(document.getElementById('id_that_does_notexist'), {
edited May 22 '18 at 13:48
Siddharth
6,573964111
answered Mar 21 '17 at 6:39
Hua TrungHua Trung
1,519910
I think center: {lat: 39.305, long: -76.617}, with long not right.
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
map = new google.maps.Map(document.getElementById('id_that_does_notexist'), {
edited May 22 '18 at 13:48
Siddharth
6,573964111
answered Mar 21 '17 at 6:39
Hua TrungHua Trung
1,519910
edited May 22 '18 at 13:48
Siddharth
6,573964111
edited May 22 '18 at 13:48
Siddharth
6,573964111
edited May 22 '18 at 13:48
Siddharth
6,573964111
6,573964111
answered Mar 21 '17 at 6:39
Hua TrungHua Trung
1,519910
answered Mar 21 '17 at 6:39
Hua TrungHua Trung
1,519910
answered Mar 21 '17 at 6:39
Hua TrungHua Trung
1,519910
1,519910
I changedlongtolngand that didn't seem to change anything. I am writing the javascript for my initial map straight from this guide: developers.google.com/maps/documentation/javascript/examples/…
– Calvin Ellington
Mar 21 '17 at 12:55
8
u putclass='map'it wrong, u need change to this:<div id='map'>maps error</div>
– Hua Trung
Mar 21 '17 at 13:14
5
this was my issuemap = new google.maps.Map(document.getElementById('id_that_does_notexist'), {
– Siddharth
Jan 9 '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 1 '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 1 '18 at 12:33
add a comment |
I changedlongtolngand that didn't seem to change anything. I am writing the javascript for my initial map straight from this guide: developers.google.com/maps/documentation/javascript/examples/…
– Calvin Ellington
Mar 21 '17 at 12:55
8
u putclass='map'it wrong, u need change to this:<div id='map'>maps error</div>
– Hua Trung
Mar 21 '17 at 13:14
5
this was my issuemap = new google.maps.Map(document.getElementById('id_that_does_notexist'), {
– Siddharth
Jan 9 '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 1 '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 1 '18 at 12:33
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: developers.google.com/maps/documentation/javascript/examples/…– Calvin Ellington
Mar 21 '17 at 12:55
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: developers.google.com/maps/documentation/javascript/examples/…– Calvin Ellington
Mar 21 '17 at 12:55
8
8
u put
class='map' it wrong, u need change to this: <div id='map'>maps error</div>– Hua Trung
Mar 21 '17 at 13:14
u put
class='map' it wrong, u need change to this: <div id='map'>maps error</div>– Hua Trung
Mar 21 '17 at 13:14
5
5
this was my issue
map = new google.maps.Map(document.getElementById('id_that_does_notexist'), {– Siddharth
Jan 9 '18 at 20:38
this was my issue
map = new google.maps.Map(document.getElementById('id_that_does_notexist'), {– Siddharth
Jan 9 '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 1 '18 at 12:24
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 1 '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 1 '18 at 12:33
please give more informations, press F12 to view console log and copy that error here or full html and javascript?
– Hua Trung
Aug 1 '18 at 12:33
add a comment |
Unable to find map id
– Khurshid Ansari
Mar 7 '18 at 8:27