web-dev-qa-db-fra.com

TypeError non capturé: impossible de lire la propriété 'firstChild' de null (le chargement des cartes Google est impossible)

Je me demandais si quelqu'un serait en mesure de me prêter leurs connaissances concernant l'API Google Maps. J'ai lu des questions similaires et je n'ai toujours pas pu trouver de réponse. Comme le titre l'indique, l'erreur apparaissant dans la console de mon navigateur est la suivante:

Uncaught TypeError: Cannot read property 'firstChild' of null

Je comprends que cela signifie qu’il ya un problème avec la manière dont les valeurs sont transmises; Voici mes extraits de code pertinents dans lesquels sources pointe dans 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());
}

L'erreur semble être générée lorsque Google Maps tente de se charger. Est-ce que quelqu'un a une idée de ce que je fais mal ici? Merci pour toute aide offerte.

Html pour référence:

<!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>
javascriptjquerygoogle-maps
22
Calvin Ellington

Je pense que center: {lat: 39.305, long: -76.617}, avec long ne convient pas.
Vous devriez définir latlng comme ceci:

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

et

Uncaught TypeError: Impossible de lire la propriété 'firstChild' de null

Un message d'erreur apparaît généralement lorsque map = new google.maps.Map(document.getElementById('id_that_does_notexist'), {

53
Hua Trung