InvalidStateError: "An attempt was made to use an object that is not, or is no longer, usable" in basic Google Map tutorial example

javascript html google-maps firefox

44,291

Solution 1

I found this Google page (webarchive). It seems undocumented, though. Click on the button. Works on both FF and IE. Check out the markup and the Javascript, it loads the map via a callback.

Thanks for putting me on the right track.

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Dynamic Loading</title>
<script type="text/javascript">
  function handleApiReady() {
    var myLatlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
      zoom: 8,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  }

  function appendBootstrap() {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=handleApiReady";
    document.body.appendChild(script);
  }
</script>
</head>
<body style="margin:0px; padding:0px;">
  <input type="button" value="Load Bootstrap + API" onclick="appendBootstrap()">
  <div id="map_canvas" style="width:400px; height:400px"></div>
</body>
</html>

Solution 2

I find the most common cause of this error is simply an invalid img src.

Solution 3

My error was something similar (which is why I found this post), but only in Internet Explorer (version 11):

File: eval code (401), Line: 39, Column: 304

This was caused because I used svg-images as markers:

var marker = map.addMarker({
    lat: position.coords.latitude,
    lng: position.coords.longitude,
    icon : {
        url : '/images/marker.svg'
    }
});

Switching to png-images instead of svg solved my problem!

44,291

Author by

Herb

Updated on November 10, 2021

Comments

Herb over 2 years

I have an XML, which is transformed to HTML via an XSLT. The XML is able to contain JavaScript, and it translates this correctly to HTML, as I do in many other pages as well. It just does not work with GoogleMaps, and I suspect, my JavaScript is faulty somewhere.

The relevant sections of the resulting HTML look like posted below.

What's happening in the HTML/in the Scripts:

The API is loaded from googleapis.com
A div with the ID map_canvas is created.
A function start() is defined, which is started via <body onload="start();">.
In this function, a variable map_canvas is created and passed the reference to the div object named map_canvas.
To control, that this step worked, I give the div the new background color red.
It works.
Next, I'd want to create the variable var_options and set initial values for center, zoom, and mapTypeId.
To control, that this step worked, I give the div the new background color blue.
This does not work, it stays red.
Hence, this instruction was not executed.
So I check if I can access the object google.maps at all.
if so, I give the div the new background color green.
This works, so I can access this object.
Cross check: If I comment out the statement loading the API, the color does not change.

To me, this looks like the following is faulty somewhere.

    var map_options = {
        center: new google.maps.LatLng(44.54, -78.54),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }

But after several hours I still cannot figure out what it is.

<html>
    <head>
        ...
        <script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript">
        </script>

        <script type="text/javascript">
        function start()
        {   
            var map_canvas = document.getElementById('map_canvas');

// If the element can be located, we make it green. Checked.
// If we give the function another name than start, it won't be executed. Checked.
map_canvas.style.backgroundColor = 'green';

            if(typeof google.maps != 'undefined') {
// If the google.maps object exists, we make the canvas red. Checked.
// If the API was not loaded from googleapis (commented out), it will stay green. 
map_canvas.style.backgroundColor = 'red';
            }

// So why does the following not work?
            var map_options = {
                center: new google.maps.LatLng(44.54, -78.54),
                zoom: 8,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }
// Not arriving here:
map_canvas.style.backgroundColor = 'blue';

// Before going on, I want to solve above problem, so this is commented out.
//            var map = new google.maps.Map(map_canvas, map_options);
// map_canvas.style.backgroundColor = 'black';
        }
        </script>
    </head>


    <body onload="start();">
        ...
        <div style="width: 400px; height: 224px;" id="map_canvas"></div>
        ...
    </body>
</html>

Admin over 10 years

It was in my case. +1.
Promo about 9 years

Try to add height and width to your SVG. See for more info : stackoverflow.com/questions/23923607/…
marcvangend over 7 years

Thanks @Promo, that was exactly what I needed. Your comment could be a separate answer if you ask me.