10

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 O.
  • 32,158
  • 14
  • 82
  • 96
  • 1
    What error do you get in the console? – Bergi Jun 20 '13 at 11:36
  • 1
    The code gave me error that sensor has to be either true or false. I tested around a bit and changing your googleapis url to ` – Ilu Jun 20 '13 at 11:38
  • Thanks Puuskis. This was a copy-paste rmnant, originally I used key=xxx, but I later learned, that it's not neccessary any longer. - However, my code still does not work, i.e., the div stays red. –  Jun 20 '13 at 11:49
  • @Bergi. It refers to line 9 of the loaded js, wich reads: '' type="text/javascript"><' + '/script>');'. It says: [13:54:46.604] InvalidStateError: "An attempt was made to use an object that is not, or is no longer, usable @ http://maps.googleapis.com/maps/api/js?sensor=false:9" –  Jun 20 '13 at 11:57
  • 1
    What browser (version) are you using? Looks like this is a browser-specific error. – Bergi Jun 20 '13 at 12:35
  • @Bergi - Thank you, this solved the problem! Firefox 21.0 is the evildoer. IE 10 has no problems with it. - To think, that I changed to FF to avoid those constant IE problems! Now I need to google if there is a fix for this, I don't assume I am the only one having this problem... –  Jun 20 '13 at 12:46
  • Well, changing the browser does not really solve the underlying problem… My google searches showed some problems with FF Ajax throwing this exception, seems to be a bug in the GM script. – Bergi Jun 20 '13 at 12:53

3 Answers3

15

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

Peter Drinnan
  • 4,344
  • 1
  • 36
  • 29
6

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>
TobTobXX
  • 418
  • 4
  • 17
4

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!

Wietse
  • 372
  • 7
  • 18
  • 2
    Try to add height and width to your SVG. See for more info : http://stackoverflow.com/questions/23923607/custom-markers-in-google-maps-not-showing-up-in-firefox#answer-24280941 – Promo May 29 '15 at 14:02
  • Thanks @Promo, that was exactly what I needed. Your comment could be a separate answer if you ask me. – marcvangend Oct 18 '16 at 08:28