CODEWITHSUNDEEP
phpjavascript
Pavel
Pavel

Reputation: 5353

Why google map code is blocking my other js scripts?

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?

Upvotes: 0

Views: 258

Answers (3)

jmbucknall
jmbucknall

Reputation: 2061

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();
    };
}

Upvotes: 1

ifaour
ifaour

Reputation: 38135

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.

Upvotes: 1

woot586
woot586

Reputation: 3965

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.

Upvotes: 0

Related Questions