Error in IE for loading Main.js in Google Maps Javascript API ver3

Question

I am using Google Maps Javascript API ver3 to display the world locations. Below is the sample code I am using:

<!DOCTYPE html> 
<html>
   <head>
     <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
     <style type="text/css">
       html { height: 100% }
       body { height: 100%; margin: 0; padding: 0 }
       #map_canvas { height: 100% }
     </style>
     <script type="text/javascript"       src="http://maps.googleapis.com/maps/api/js?sensor=true">
     </script>
     <script type="text/javascript">
        function addMarkers(location,locationDetail,map){

            var color = "#000000"

            if(locationDetail[1]=="A"){
                color = "#FF0000";
                scl = 3;
            }
            else if(locationDetail[1]=="B"){
                color = "#0000FF"
                scl = 4;
            }
            else if(locationDetail[1]=="C"){
                color = "#00FF00"
                scl = 5;
            }

            var marker = new google.maps.Marker({
                position: location,
                title: locationDetail[0],
                icon: { 
                    path: google.maps.SymbolPath.CIRCLE,
                    scale: scl,
                    fillColor: color,
                    fillOpacity:1,
                    strokeWeight:1
                }
            });


            // To add the marker to the map, call setMap();
            marker.setMap(map); 

    }
       function initialize() {

        //Marking Latitude and Longitude
        var myLatlng = [
                new google.maps.LatLng(24.466667,54.366667),
new google.maps.LatLng(-34.4,-58.24),
new google.maps.LatLng(-33.8641,151.0823)

                   ];
        var myLatlngDet = [
["Abu Dhabi","A"],
["Buenos Aires","B"],
["HOMEBUSH","C"]        
                  ];

        //Map Options to customize map
            var mapOptions = {
            zoom:2,
        center: new google.maps.LatLng(40,0),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapMaker: true,
        minZoom : 2,
        scrollwheel: false,
        mapTypeControl:true,
        mapTypeControlOptions: { 
            style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
            position: google.maps.ControlPosition.BOTTOM_CENTER
        },
        scaleControl:true,
        scaleControlOptions: { 
            position: google.maps.ControlPosition.TOP_LEFT
        },
        streetViewControl:true,
        streetViewControlOptions: {
                position: google.maps.ControlPosition.LEFT_TOP     
        }, 
        overviewMapControl:false,
        zoomControl:true,
        zoomControlOptions: {
            style: google.maps.ZoomControlStyle.LARGE,
            position: google.maps.ControlPosition.LEFT_CENTER
        },
        panControl:true,
        panControlOptions: {
            position: google.maps.ControlPosition.TOP_RIGHT 
        }
         };

     //Generating map in the div
         var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);


    for(i=0; i < myLatlng.length; i++){

        addMarkers(myLatlng[i],myLatlngDet[i],map);
    }

       }     
      </script>
   </head>

   <body onload="initialize()">
     <div id="map_canvas" style="height: 100%; width: 80%;">
     </div>   
   </body> 
</html>

The Problem is - Sometimes the markers get displayed properly but sometimes I get a javascript error as follows:

'Unexpected Call to Method or Property access' main.js

Can you help me identifying the cause of the problem.

I am using IE8.

Thanks in advance

I was able to reproduce the problem a couple of times in a row, then it dissapeared; never to return. Seems like a race condition. — Lodewijk Bogaards, Mar 05 '13 at 08:03

score 1 · Answer 1 · edited May 23 '17 at 11:57

1

My guess is that it's the body's onload that is not waiting until googlemap's script is loaded. In theory the body can be loaded faster than the googlemap script (relevant discussion). Try putting

window.onload=initialize;

at the bottom of your script instead of using the body's onload and see if this solves your problem. I have a hard time reproducing this.

Update You should simply wait until googlemap has loaded which follows after the window load. Have a look at this question: How can I check whether Google Maps is fully loaded?

edited May 23 '17 at 11:57

Community

1
1

answered Mar 05 '13 at 08:13

Lodewijk Bogaards

19,777
3
28
52

For me the problem still persists. :( I tried what u suggested, still had no success :( – Pri Mar 05 '13 at 18:22
Yes, my guess was wrong. Do you have a way to easily reproduce this problem yet? – Lodewijk Bogaards Mar 06 '13 at 09:12
hi, it seems the problem is with my browser version or something else, because i tried the same code in another machine IE8 and this problem did not appear there. – Pri Mar 07 '13 at 10:43
1

No, it is most likely a race condition. I also got the problem in IE10 running IE8 mode, but only once or twice. I think the problem is with IE8. A different machine might be quicker or slower and thus not cause the race condition. – Lodewijk Bogaards Mar 07 '13 at 11:01
@mrhobo - I think you're right about the race condition. In my case, it intermittently happens when I attempt to add the first marker to the map using `marker.setMap(map);`. If I add a `setTimeout` around that call for about a second or so, it goes away. – johntrepreneur Aug 15 '13 at 22:28
@mrhobo - So it is a race condition, but I'm not sure if it has to do with waiting for the google map script to load, or if the map has just not yet finished initializing before I attempt to add the marker. Either way though, a short delay before interacting with it solves the problem (for me). It's not ideal since the delay will depend on the client hardware though. My code is wrapped in the jquery DOM .ready() function, but I guess that doesn't gaurantee it's finished initializing though. – johntrepreneur Aug 15 '13 at 22:29

Error in IE for loading Main.js in Google Maps Javascript API ver3

1 Answers1