Javascript help

JavaScript
1

Hey,

Got a slight javascript problem I can’t seem to solve.

I haven’t got it online as i’m developing locally but hopeful that some good people on here can help me figure out what is going wrong.

My JS code is:

$(document).ready(function() {




  // ------------------------------------




  // Define map centre as world overview
  var worldCenter = new google.maps.LatLng(33.4, -5);

  // Set up homeMap options (Default zoom level is set to 2)
  var homeMapOptions = {
    scrollwheel: false,
    zoom: 2,
    center: worldCenter,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  // Display map on page
  var homeMap = new google.maps.Map($('.map')[0], homeMapOptions);
  
  // Set up a markerManager and apply it to the homeMap
  mgr = new MarkerManager(homeMap);
  
  // Set up two empty arrays to hold the Coaster and Park markers
  var parkMarkers = [];
  var coasterMarkers = [];
  
  // ------------------------------------
  
  
  
  //Show all Parks as markers on homeMap

  //Make json request and run a function with all parks in the parks object
  $.getJSON('parks.json', function(parks) {
  
    // Set up an infoWindow
    var infoWindow;
  
    // For each park...
    $.each(parks, function(key, park) {
    
      // Set a location variable
      latlng = new google.maps.LatLng(park.lat, park.lng);
  
      // Create a marker for the current park and put it on the map
      var parkMarker = new google.maps.Marker({
        position: latlng
      })
      
      // Add new marker to parkMarkers array
      parkMarkers.push(parkMarker);
    
    });
    
    // Add park markers to map to show up at level 2 and up
    mgr.addMarkers(parkMarkers, 2);
    mgr.refresh();
  
  });
  
  
  // ------------------------------------




  //Show all Coasters as markers on homeMap

  // Make json request and run a function with all coasters in the coasters object
  $.getJSON('coasters.json', function(coasters) {

    // Set up an infoWindow
    // No need to set up an infoWindow, as we'll use the one from when Parks were displayed

    // For each coaster...
    $.each(coasters, function(key, coaster) {
      
      // Set a location variable
      latlng = new google.maps.LatLng(coaster.lat, coaster.lng);

      // Create a marker for the current coasters and put it on the map
      var coasterMarker = new google.maps.Marker({
        position: latlng
      })
      
      // Add new marker to coasterMarkers array
      coasterMarkers.push(coasterMarker);
      
    });
    
    // Add coaster markers to map to show up at level 5 and up
    mgr.addMarkers(coasterMarkers, 16);
    mgr.refresh();
  
  });
  
  
  
  
  // ------------------------------------




});

Basically, it sets up a Google Map and puts it on my page, then does two ajax requests to get two json files. Loops throguh each one and ends up with two arrays. I then use the Google Marker Manager to add each array of markers to the map so they show up at the specified zoom levels.

Now, it DOES work perfectly but not everytime it is run. For example

First load, all works fine, both park and coaster markers show up at appropriate zoom levels.

Reload page and I will only see coaster markers no parks,

reload again and it’s the same

reload again and it all works,

reload again and nothing works

It seems like a timing erro or something but i’m not 100% proficient in javascript so could do with a bit of troubleshooting help please.

Everytime one of the arrays of markers fails to show on the map, I get the following error in my javascript console:

Uncaught TypeError: Cannot call method ‘fromLatLngToDivPixel’ of undefined

I really hope someone can come along and give me to advice to help solve this problem.

Thanks,
Neil