Why google map code is blocking my other js scripts?

Question

Just like in the title - why google map code is blocking my other js scripts? I have the following code in the header:

<script type="text/javascript">

  /* Sets up the map with markers */
  function starter() 
  {
    var latlng = new google.maps.LatLng(38.60427939057251, -9.07470703125);

    var myOptions = {
      zoom: 4,
      center: latlng,
      navigationControl: true,
      scaleControl: false,
      mapTypeId: google.maps.MapTypeId.ROADMAP
  };

    var map = new google.maps.Map(document.getElementById("tab14"), myOptions);

      /* Sets up markers */    
      markers = []; 

      infoWindow = new google.maps.InfoWindow();              

      for (var i = 0, coordinates; coordinates = data.coords[i]; i++) 
      {             
                  var iconImage = new google.maps.MarkerImage("http://map.lgfl.org.uk/images/arrow_green.png");
                  var LatLng = new google.maps.LatLng(coordinates.latitude, coordinates.longitude);
                  var marker = new google.maps.Marker({position: LatLng, icon: iconImage });

                  var contentString = '<div>'+ 
                                      '<a href='+coordinates.url+'><h4>'+coordinates.title+'</h4></a>'+
                                      '<div>'+
                                      '<p><a href='+coordinates.url+'>'+coordinates.excerpt+'</a></p>'+
                                      '</div>'+
                                      '</div>';

                  addMarker(marker, contentString);
                  markers.push(marker);
      }

      /* Sets up marker clusterer */
      var markerCluster = new MarkerClusterer(map, markers); 

      function addMarker(marker, content)
      {
         google.maps.event.addListener(marker, 'click', function() {
                         infoWindow.setContent(content);
                         infoWindow.open(map, marker);
         });
      }

  }

window.onload = starter;
</script>

And now when I want to include any other js code to do something different on the page it doesn't do it because of this code. When I comment out the window.onload = starter line everything works fine. Can someone please tell me what am I doing wrong here?

Are you trying to use the window.onload function again for your other scripts? — polarblau
– polarblau, Commented Jan 17, 2011 at 15:04
yes, I'm doing this with other scripts, why? Is that the case? — Pavel
– Pavel, Commented Jan 17, 2011 at 16:27

ifaour · Accepted Answer · 2011-01-17 17:32:47Z

1

Make sure that you don't have any errors inside your starter function, most likely it's your map canvas (you don't have element with this ID):

document.getElementById("tab14")

Or your data object:

for (var i = 0, coordinates; coordinates = data.coords[i]; i++)

I don't see where you are setting this.

EDIT:
Based on your question's comment, it seems that you are overwriting the onload method, simply this won't work:

window.onload = func1;
window.onload = func2;

This would only execute the func2 method!
Try this:

function func1() {
  alert("This is the first.");
}

function func2() {
  alert("This is the second.");
}


function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(func1);
addLoadEvent(func2);

addLoadEvent(function() {
    document.body.style.backgroundColor = '#EFDF95';
})

SOURCE.

edited Jan 17, 2011 at 17:32

answered Jan 17, 2011 at 15:34

ifaour

38.1k12 gold badges74 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pavel Over a year ago

I do have div with id "tab14" and my data object is loaded earlier. It holds the coordinates in json format - I'm loading it as an external link earlier in the header.

jmbucknall · Accepted Answer · 2011-01-17 17:56:41Z

1

window.onload is a single function entry point. Whichever piece of code sets it last defines the only code that will execute. What you need to do is either to use some kind of framework (like jQuery) that will set up a queue of functions to execute once the document is loaded (the ready function in essence sets up a list of functions to call), or to write this yourself.

Here's an example:

function addLoadHandler(func) {
    var oldEventHandler = window.onload;
    window.onload = function() {
        if (oldEventHandler) {
            oldEventHandler();
        }
        func();
    };
}

answered Jan 17, 2011 at 17:56

jmbucknall

2,06113 silver badges14 bronze badges

Comments

woot586 · Accepted Answer · 2011-01-17 15:04:44Z

0

Google maps does throw a couple of errors about its iframe trying to access your page. Try moving the Google code into the Footer, so its the last thing loaded.

answered Jan 17, 2011 at 15:04

woot586

3,98510 gold badges36 silver badges41 bronze badges

Collectives™ on Stack Overflow

Why google map code is blocking my other js scripts?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related