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

Question

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>

Peter Drinnan · Accepted Answer

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

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

Tags:

javascript

html

firefox

google-maps

Herb

1 Answers

Peter Drinnan

Recent Activity

Donate For Us

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

Tags:

javascript

html

firefox

google-maps

Herb

1 Answers

Peter Drinnan

Related questions

Recent Activity

Donate For Us