Me preguntaba si alguien podría prestarme su conocimiento sobre la API de Google Maps. He leído preguntas similares y todavía no he podido encontrar una respuesta. Como dice el título, el error que aparece en la consola de mi navegador es:
Uncaught TypeError: Cannot read property 'firstChild' of null
Entiendo que esto significa que hay un problema con la forma en que se transmiten los valores; Los siguientes son mis fragmentos de código relevantes a los que apuntan las sources en 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()); }El error parece aparecer cuando Google Maps intenta cargarse. ¿Alguien tiene una idea de lo que estoy haciendo mal aquí? Gracias por cualquier ayuda ofrecida.
html para referencia:
<!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>Creo que center: {lat: 39.305, long: -76.617} , con long no es correcto.
Deberías definir latlng así:
var latlng = new google.maps.LatLng(39.305, -76.617); map = new google.maps.Map(document.getElementById('map'), { center: latlng, zoom: 12 });y
TypeError no detectado: no se puede leer la propiedad 'firstChild' de null
El mensaje de error generalmente ocurre cuando el contenedor de mapas no existe:
map = new google.maps.Map(document.getElementById('id_that_does_notexist'), {