web-dev-qa-db-fra.com

Erreur de carte Google: a est null

Je souhaite utiliser un programme pour google maps. Le problème est que j'obtiens une erreur disant que a est null, où a est une variable utilisée dans l'API Google Map. Voici comment j'appelle ma carte 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);

Et voici à quoi ressemble ma balise HTML: 

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

Je reçois les lat et lng au chargement de la page via l'URL. Ces valeurs sont correctement transmises, donc je sais que ce n’est pas le problème. Je pense que cela a à voir avec le var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); ne pas être correct. Aucune suggestion?

EDIT: Voici le message d'erreur:

a est nul fromLatLngToPoint (a = null) yg (a = null, b = objet {zoom = 7, maxZoom = 12, plus ...}) d (d = Document Default.aspx? lat = 30.346317 & lng = 105.46313, f = [fonction ()]) d (a = non défini) ré() [Break On This Error] fonction Qf (a) {a = a.f [9]; renvoyer a! = I? A: ...); fonction sg (a) {a [ic] && a [ic] Vb}

javascriptgoogle-maps
42
Stanley Cup Phil

Assurez-vous de spécifier la taille de l'élément qui contient la carte. Par exemple:

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

Assurez-vous également que votre variable de mappe est définie dans la portée globale et que vous initialisez la mappe une fois le DOM chargé.

52
Michal

Vous n'écoutez probablement pas l'événement onload qui se déclenche lorsque la page est complètement chargée. En conséquence, votre script est en cours d’exécution, mais la variable div que vous créez n’existe pas encore. Utilisez jQuery pour écouter cet événement, comme suit:

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

Si vous ne souhaitez pas utiliser jQuery, ajoutez un écouteur d'événement à body.onload.

21
Travis Webb

Cette erreur plutôt cryptique signifie que le script ne trouve pas la div de la carte . Cela peut arriver pour plusieurs raisons.

1. Vous utilisez le mauvais identifiant pour vous référer à la carte.

Vérifiez vos identifiants (ou classes) et assurez-vous que l'élément auquel vous faites référence existe réellement.

2. Vous exécutez le script avant que le DOM ne soit prêt.

Voici un exemple jQuery. Remarquez que nous déclenchons l'initialisation sur le document prêt, et non sur ONOMATIF. J'ai pris la liberté d'envelopper le script dans une fermeture.

(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)

Vous pouvez aussi utiliser:

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

si vous préférez une solution Google.

10
superluminary

Avait exactement le même problème et c'est ce que je l'ai corrigé pour moi.

Le problème, c’est que j’avais 2 cartes Google sur mon site Web - une dans le pied de page et l’autre sur la page de contact, mais je les ai appelées toutes les deux dans un fichier JS comme suit:

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

Mais le problème est que l'objet avec id="map-canvas" était situé uniquement sur la page de contact . Donc, vous devez d'abord vérifier si cet élément existe sur la page comme suit:

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);
}

J'espère que cela peut aider quelqu'un d'autre aussi;)

9
Streamline

Cela se produit lorsque la carte n'est pas encore chargée. Vous devez créer votre carte une fois le JavaScript de l’API de la carte chargé. Exécution de la fonction pour initialiser votre carte uniquement lorsque l'API est complètement chargée en la passant au paramètre "callback" dans le bootstrap de l'API 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;

C’est en fait dans la documentation de l'API Google Maps ici . J'espère que cela t'aides!

3
Nicolas Pinos

Assurez-vous que votre div en canevas (div associé à la carte) existe . Parfois, si nous renommons l'attribut id du div ..__, cela crée un problème car il n'obtient pas le div de canevas.

2
Pupil

Je l'ai corrigé en supprimant ma propriété "style" de la balise "div" et en la déclarant correctement, dans un fichier css

1
Fita

J'ai eu cette erreur une fois. Assurez-vous que le script de carte ne s'exécute que sur les pages utilisant la carte. Vous pouvez vérifier si la carte existe en utilisant un "if". Quelque chose comme ça: 

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

À plus 

1
Rafael Cavalcante

Résolue, la carte Google tapez une erreur, assurez-vous que l'objet var map = document.getElementById ('map-canvas') soit renvoyé correctement à l'aide de alert (map). Vérifiez que le nom de l'ID de conteneur div est le même que celui spécifié dans getElementByid.

J'ai également bloqué avec le même type une erreur, corrigé en vérifiant getElementByid ('map-canvas'). Exemple de code entrez la description du lien ici

0
Anoop P S