Google map error: a is null - javascript

I have a program that I want to use google maps for. The problem is I get an error that says a is null where a is a var used in the google map api. Here is how I call my google map:
//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);
And here is what my HTML tag looks like:
<div id = "map_canvas"></div>
I get the lat and lng on page load through the url. These values are passed in correctly so I know that is not the problem. I think that it has to do with the var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); not being correct. Any suggestions?
EDIT: Here is the error message:
a is null
fromLatLngToPoint(a=null)
yg(a=null, b=Object { zoom=7, maxZoom=12, more...})
d(d=Document Default.aspx?lat=30.346317&lng=105.46313, f=[function()])
d(a=undefined)
d()
[Break On This Error] function Qf(a){a=a.f[9];return a!=i?a:...);function sg(a){a[ic]&&a[ic]Vb}

Make sure you specify the size of the element that holds the map. For example:
<div id="map_canvas" style="width: 500px; height: 500px;"></div>
Also make sure your map variable is defined in the global scope and that
you initialize the map once the DOM is loaded.

You are probably not listening for the onload event that fires when the page is completely loaded. As a result, your script is running but the div you are creating doesn't yet exist. Use jQuery to listen for this event, like so:
$(document).ready(function () {
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
});
If you don't want to use jQuery, then add an event listener to body.onload

This rather cryptic error means that the script can't find the map div.
This could happen for a couple of reasons.
1. You're using the wrong ID to refer to the map.
Check your ids (or classes) and make sure the element you're referring to actually exists.
2. You're executing the script before the DOM is ready.
Here's a jQuery example. Notice we're triggering initialise on document ready, not onDOMReady. I've taken the liberty of wrapping the script in a closure.
(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)
You could also use:
google.maps.event.addDomListener(window, 'load', initialize);
if you prefer a Google solution.

Had the exact same problem and this is have i fixed it for me.
The thing was that I had 2 google maps in my website - one in the footer and the other one on the contact page, but i called them both in one JS file like so:
var map1 = new google.maps.Map(document.getElementById("map-canvas-footer"), settings1);
var map2 = new google.maps.Map(document.getElementById("map-canvas"), settings2);
But the thing is that the object with id="map-canvas" was located only on the contact page.
So at first you have to check if that element exists on the page like so:
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);
}
I hope this can help someone else as well ;)

This happens when the map is not yet loaded. You should build your map when the Maps API JavaScript has loaded. Executing the function to initialize your map only when the API has fully loaded passing it to the "callback" parameter in the Maps API bootstrap.
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;
This is actually in the Maps API Docs here. Hope this helps!

Make sure that your canvas div (Div associated with the map) exists.
Sometimes, if we rename the div's id attribute.
Then it creates problem as it does not get the canvas div.

I got this error once. Make sure the map script runs only on pages using the map. You can check if the map exists by using an "if". Something like this:
if ($('mapClass').length>0) { // here you run the google maps functions }
See ya

Solved, the google map type a error, make sure you get object var map = document.getElementById('map-canvas') returning properly using alert(map). Check the div container id name same as specified in getElementByid.
I have also stuck with the same type a error, fixed it by checking getElementByid('map-canvas'). Sample code enter link description here

I have fixed it removing my "style" property from the "div" tag an declaring it correctly, in a css file

My response is bit old but for those who still come here for reference, I have a similar solution. I put map initialization code as specified here https://developers.google.com/maps/documentation/javascript/adding-a-google-map
inside jQuery document ready function. Below is the code that worked in my case:
$(document).ready(function () {
var uluru = {lat: -25.344, lng: 131.036};
var map = new google.maps.Map( document.getElementById('embedmap'), {zoom: 14, center: uluru} );
var marker = new google.maps.Marker({position: uluru, map: map});
});

Related

Loading large KML layers without blocking UI

I'm loading large KML layers using the google maps API and geoxml3, via parseKMLString.
Relevant question and Example using this function.
While these files are being rendered to the map, the UI is frozen. As this is using google maps, I can't put this code in a Worker and wrapping this in a promise isn't going to change anything.
Relevant code block:
var latLong = new google.maps.LatLng(37.0902, -95.7129);
var myOptions = {
center: latLong,
zoom: 10
};
myMap = new google.maps.Map(document.getElementById('map-canvas'), myOptions);
geoXmlParser = new geoXML3.parser({
map: myMap ,
singleInfoWindow: true
});
geoXmlParser.parseKmlString("long-kml-string", geoXmlParser.docs);
I'm also open to alternatives to both loading these files and other libraries that may exist to assist.

GoogleMaps InfoWindow appear at a corner

here is my code in html to generate marker and infowindow(with ruby on rails)
var marker=[]
function initMap() {
var latLng1 = new google.maps.LatLng(1.352083, 103.819836);
var myOptions = {
zoom: 12,
center: latLng1,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
for(i=0;i<gon.astatic.length;i++){
var latLng = new google.maps.LatLng(gon.astatic[i][1], gon.astatic[i][2]);
if(i<2){
marker[i] = new MarkerWithLabel({position: latLng, map: map,icon:"/assets/green_MarkerV.png" ,labelClass: "labels",labelContent: gon.astatic[i][3]});}
else
{
marker[i] = new MarkerWithLabel({position: latLng, map: map,icon:"/assets/green_MarkerN.png" ,labelClass: "labels",labelContent: gon.astatic[i][3]});
}
var iw =new google.maps.InfoWindow({content: 'HI' });
google.maps.event.addListener(marker[i],"mouseover",function(e){iw.open(map,marker[i]);})
}
this gon is just some 'stupid' method I use to pass data from ruby on rails controller to javascript.
for all marker,the infowindow all appear at corner.
But for my another map(which have only one marker with infowindow)it works fine.
What might be my problem?why this infowindow appear in wrong position?Instead of just above the marker?
EDIT:
After half day's trouble shoot,I feel the problem is at
google.maps.event.addListener(marker[i],"mouseover",function(e){iw.open(map,marker[i]);})
when the listener calls back,the value inside marker is i ,which is not a actual number,so the marker display at a corner.I feel the problem is can't pass variable into addListener,can only put in actual number.How to solve this?
Each instance of the function declared inside the for loop shares the same closure containing the value i, and so all of your addListener calls are essentially calling iw.open(map, undefined) since i will be off the end of the array at the end of the iteration.
See JavaScript closure inside loops – simple practical example for sample solutions to this problem, and How do JavaScript closures work for more information about closures in JavaScript in general.
The problem is with your MarkerWithLabel library. Infowindow take position from marker. Try use this link http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.8/docs/examples.html . It has all the things that you want to implement. It it's not work then you can also set position for infowindow with setPosition() function just pass latlng that you used to create marker and you are done.
i dont recommend using new gem just to pass data from ruby to js...you can do this simply by many ways...your code seems good but i cannot say how gon is handling your js script.Please take a look at this similar question where i have implemented the same dynamic map with dynamic markers and infowindows.This code is working great
see here

What is causing a Google Maps error in IE8?

We are using Google Maps and have identified an issue that only seems to happen in IE8 (and possibly below). The functionality works correctly in FF, Chrome, IE9.
The code that the error happens around is:
google.load("maps", "3.x", { other_params: "sensor=false" });
var mapdiv = null;
$(function () {
mapdiv = document.getElementById("map");
map = new google.maps.Map( mapdiv, {
zoom: 1,
center: new google.maps.LatLng(6, 35),
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var latlngbounds = new google.maps.LatLngBounds( );
In particular on this line:
map = new google.maps.Map( mapdiv, {
zoom: 1,
center: new google.maps.LatLng(6, 35),
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.TERRAIN
});
and the error is:
Object doesn't support this property or method
I've had a bit of a play with the IE dev tools and if I replace map = with something like var x = there isnt any error, so this leads me to believe that the map object is the culprit that is missing some property/method. Although I don't really know where the map object comes from, I assume it gets loaded from the google.load call.
Does anyone know what is going on here?
When the line:
map = new google.maps.Map(mapdiv, { zoom: 1, center: new google.maps.LatLng(6, 35), disableDefaultUI: true, mapTypeId: google.maps.MapTypeId.TERRAIN });
gets executed the JavaScript interpreter will start traversing up the scope chain looking for where map is declared. Since it's not declared locally, i.e. var map = ..., it doesn't find it in your local scope, and it ultimately gets added to the global scope.
In your case map is already defined in the global scope as window.map because, it's the Id of a div on your page. In all the browsers you don't see an error message, window.map is set to a new google.maps.Map object. For some reason, good or bad, IE8 won't let you create a global variable whose name conflicts with an existing global variable that refers to a DOM element.
You could resolve this several different ways:
Create a local var map
Change the id of your div from map to something else
If you have to have map exist in global scope, set it using window.map =...
(3b) Change the variable name to be one that doesn't conflict with window.map, e.g. myMap = new google.maps.Map(...

Google Maps javascript API + HTML5 geolocation quirk

I'm having a rather strange issue with the Google Maps javascript API and HTML5 geolocation.
I have the following executed onload:
var geocoder;
var map;
var latlng;
function initialize() {
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(function(position){
latlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
});
}else{
latlng = new google.maps.LatLng(geoip_latitude(),geoip_longitude());
}
geocoder = new google.maps.Geocoder();
var myOptions = {
zoom: 8,
center: latlng,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.HYBRID
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
var latLong = String(event.latLng).replace('(', '');
latLong = latLong.replace(')', '');
$('#latlng').attr('value', latLong);
});
function placeMarker(location) {
if(undefined != initialize.marker){
initialize.marker.setMap(null);
}
initialize.marker = new google.maps.Marker({
position: location,
map: map
});
initialize.marker.setMap(map);
map.setCenter(location);
}
}
Now, what this should do is if the browser supports geolocation, get the lat+long, create a map, and display the map centered on the lat+long.
It works just fine if I use the geoip_ functions (maxmind), but the geolocation has a strange issue:
If the code is run as is, the google maps display shows up as a gray box with no map and no controls.
If I add an alert(); immediately after
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(function(position){
latlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
});
}else{
latlng = new google.maps.LatLng(geoip_latitude(),geoip_longitude());
}
the map displays just fine.
What's up with that?
The W3C Geolocation API is asynchronous; the success callback function you have (which sets the variable latlng) won't be called immediately -- the browser requires some time to actually do the geolocating; in fact, if the user takes some time to read the privacy prompt and decide whether or not to give permission, this process could take many seconds. In the meantime though, your map is loaded immediately.
You're probably finding that it works with an alert after it because the alert gives the browser some time to finish the geolocation process and call the callback before getting to the code that loads the map. (Just waiting a second or two isn't a good solution though: some users and browsers will take much longer than that before revealing location.)
To fix: call the function that creates the map (you'll want to encapsulate practically everything after the geolocation call) and call it both in the success callback for getCurrentPosition and in the geoip else branch. That way you'll only try to load the map after you're guaranteed that the latlng variable has been appropriately filled.
I worked through this mess for the first time this morning (honestly I am surprised the maps API doesn't have a function to deal with this). Here is My Solution: JSFIddle

How can I make infowindows resize for tweets in Google Maps v3 with Javascript

I'm trying to add a few tweets to an infowindow in Google Maps. I get the tweets to display in a div that is the content of my infowindow, but it's the wrong size.
I thought by calling 'content_changed' when the marker is clicked, the infowindow would resize - it doesn't.
I'm sure this is pretty straightforward, can someone help me out?
Thanks,
James
var myLatlng = new google.maps.LatLng(51.500261,-0.126793);
var myOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
});
var infowindow = new google.maps.InfoWindow();
infowindow.setContent(document.getElementById("station"));
google.maps.event.addListener(marker, 'click', function() {
google.maps.event.trigger(infowindow, 'content_changed');
infowindow.open(map,marker);
});
Try to call infowindow.close(); before open(). I'm pretty sure that it will force it to rerender
This isn't exactly a supported solution, but after poking around in Firebug, I found an easy way to force a resize on the window:
infoWindow.b.contentSize = new google.maps.Size(w, h);
google.maps.event.trigger(infoWindow.b, 'contentsize_changed');
As far as what the real W/H should be set to on the first line, that's a matter of looking at infoWindow.b.contentNode and getting a real width/height either through the standard properties or jQuery's methods.
I'm not sure exactly what infoWindow.b is, but it seems like it's some sort of "content" object. I wish they would expose this and document it.
I ended up with:
infoWindowLinea.setContent(infoWindowLinea.getContent());

Categories