title: Google Maps API: Setting up callbacks for adding markers/polyline
body: <p>I'm trying to add a polyline to the Google Map generated. The coordinates for the polyline are taken from a JSON file on my web server using jQuery (getJSON function). However, I'm having trouble with callbacks. I've defined three functions in a separate JavaScript file, and these are:</p>
  
  <pre><code>function initMap(callback) {
  
      map = new google.maps.Map(document.getElementById('map-canvas'), {
          center: {lat: 34.397, lng: 150.644},
          scrollwheel: false,
          zoom: 2
      });
  
      callback();
  }
  </code></pre>
  
  <p>.</p>
  
  <pre><code>function setPath(callback) {
  
     $.getJSON('./expOneActivityData.json',
  
         function (data) {
  
             //Some looping contstruct to navigate through my JSON file.   
         }
     })
  
     callback();
  };
  </code></pre>
  
  <p>.</p>
  
  <pre><code>function addPath() {
  
      var trekLine = new google.maps.Polyline({
  
          path: expeditionCoordinates,
          geodisc: true,
          stokeColor: '#FF0000',
          strokeOpacity: 1.0,
          strokeWeight: 2
      });
  
      trekLine.setMap(map);
  
  }
  </code></pre>
  
  <p>expeditionCoordinates being an array, each element being an object with latitude and longitude property. This is declared as a global variable, with value initialisation happening in setPath()'s loop.</p>
  
  <p>In my HTML file, I have:</p>
  
  <pre><code>&lt;script src="https://maps.googleapis.com/maps/api/js?key=myKey&amp;callback=initMap"&gt;
  </code></pre>
  
  <p></p>
  
  <p>When I try to replace initMap with initMap(setPath(addPath)) in the script tag, I get a 400 Bad request from Google. Ofcourse having just "callback=initMap" in the script tag gives a:</p>
  
  <pre><code>TypeError: callback is not a function
  </code></pre>
  
  <p>occuring at line with callback() in initMap's definition. </p>
  
  <p>So how can I pass a function to googleapis, where the function itself also has callbacks? (My looping construct is fine btw). I tried adding 'defer' to the googleapi script tag, and also to the one linking to my JavaScript file. I removed all the callbacks stuff, and only excecuted the loop. I hoped the expeditionCoordinates array would finish initialisation before the googleapi script tag is excecuted, though that didnt work either (map still loads, just with no polyline).</p>
  
  <p>I'm fairly new to Javascript and it's asynchronous nature, though I do understand how they work and have been succesfully working with them at a basic level for a week or so.</p>
  
  <p>(Which actually leads me to a side question. Up until now I've only worked with one callback. I would expect something like:</p>
  
  <pre><code>initMap(setPath)
  </code></pre>
  
  <p>to work as setPath does not have () attached when its definition is passed as a parameter, and hence is not excecuting immediately. Though adding a set of brackets to setPath, as it also takes a callback (addPath), would mean it does get excecuted immediately?)</p>