página - google maps javascript api

Error de mapa de Google: a es nulo

Question

Tengo un programa para el que quiero usar google maps. El problema es que recibo un error que dice que a es nulo, donde a es una var utilizada en la API de google api. Así es como llamo mi mapa de google:

//Creates a new center location for the google map
    var latlng = new google.maps.LatLng(centerLatitude, centerLongitude);

    //The options for the google map
    var myOptions = {
        zoom: 7,
        maxZoom: 12,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    //Creates the new map
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

Y aquí está mi etiqueta HTML:

<div id = "map_canvas"></div>

Obtengo el lat y lng en la carga de la página a través de la url. Estos valores se transmiten correctamente, así que sé que ese no es el problema. Creo que tiene que ver con var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); no siendo correcto ¿Alguna sugerencia?

EDITAR: Aquí está el mensaje de error:

a es nulo deLatLngToPoint (a = null) yg (a = null, b = Objeto {zoom = 7, maxZoom = 12, más ...}) d (d = Documento predeterminado.aspx? lat = 30.346317 & lng = 105.46313, f = [function ()]) d (a = undefined) d () [Break On This Error] función Qf (a) {a = af [9]; return a! = i? a: ...); función sg (a) {a [ic] && a [ic] Vb}

Answer 1

Asegúrese de especificar el tamaño del elemento que contiene el mapa. Por ejemplo:

<div id="map_canvas" style="width: 500px; height: 500px;"></div>

También asegúrese de que su variable de mapa esté definida en el alcance global y que inicialice el mapa una vez que se haya cargado el DOM.

Answer 2

Asegúrese de que exista su lienzo div (Div asociado al mapa). A veces, si cambiamos el nombre del atributo de identificación del div. Entonces crea un problema ya que no obtiene el canvas div.

Answer 3

Este error críptico significa que el script no puede encontrar el mapa div. Esto podría suceder por un par de razones.

1. Estás usando la identificación incorrecta para referirte al mapa.

Verifique sus ids (o clases) y asegúrese de que el elemento al que se refiere realmente exista.

2. Estás ejecutando el script antes de que el DOM esté listo.

Aquí hay un ejemplo de jQuery. Tenga en cuenta que estamos iniciando la inicialización en el documento listo, no en listo para el registro. Me tomé la libertad de envolver el guión en un cierre.

(function($) {
  function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(-34.397, 150.644),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map"),
        mapOptions);
  }
  $(document).ready(initialize);
})(jQuery)

También puedes usar:

google.maps.event.addDomListener(window, ''load'', initialize);

si prefiere una solución de Google.

Answer 4

Esto sucede cuando el mapa aún no está cargado. Debes construir tu mapa cuando se cargue JavaScript de Maps API. Ejecutar la función para inicializar el mapa solo cuando la API se haya cargado completamente pasándolo al parámetro "devolución de llamada" en el arranque del API de Google Maps.

function initialize() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}

function loadScript() {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE&callback=initialize";
  document.body.appendChild(script);
}

window.onload = loadScript;

En realidad, esto está en Google Maps APIs here . ¡Espero que esto ayude!

Answer 5

Lo he arreglado eliminando mi propiedad de "estilo" de la etiqueta "div" y la declaro correctamente, en un archivo css

Answer 6

Probablemente no estés escuchando el evento de carga que se dispara cuando la página está completamente cargada. Como resultado, su script se está ejecutando pero el div que está creando todavía no existe. Usa jQuery para escuchar este evento, así:

$(document).ready(function () {
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
});

Si no desea usar jQuery, agregue un detector de eventos a body.onload

Answer 7

Recibí este error una vez. Asegúrese de que la secuencia de comandos del mapa se ejecute solo en las páginas que utilizan el mapa. Puede verificar si el mapa existe utilizando un "si". Algo como esto:

if ($(''mapClass'').length>0) { // here you run the google maps functions }

Nos vemos

Answer 8

Resuelto, el mapa de google escribe un error, asegúrate de que obtienes el objeto var map = document.getElementById (''map-canvas'') regresando correctamente usando la alerta (mapa). Compruebe el nombre del id. Del contenedor div igual que el especificado en getElementByid.

También me he atascado con el mismo tipo un error, lo solucioné marcando getElementByid (''map-canvas''). Código de ejemplo ingrese la descripción del enlace aquí

Answer 9

Tenía exactamente el mismo problema y esto es lo he arreglado para mí.

El caso es que tenía 2 mapas de Google en mi sitio web, uno en el pie de página y el otro en la página de contacto, pero los llamé a ambos en un solo archivo JS como el siguiente:

var map1 = new google.maps.Map(document.getElementById("map-canvas-footer"), settings1);
var map2 = new google.maps.Map(document.getElementById("map-canvas"), settings2);

Pero el problema es que el objeto con id="map-canvas" estaba ubicado solo en la página de contacto. Entonces, al principio tienes que verificar si ese elemento existe en la página como sigue:

if ($("#map-canvas-footer").length > 0){
    var map1 = new google.maps.Map(document.getElementById("map-canvas-footer"), settings1);        
}

if ($("#map-canvas").length > 0){
    var map2 = new google.maps.Map(document.getElementById("map-canvas"), settings2);
}

Espero que esto también pueda ayudar a otra persona;)