title: stop code execution until XMLHttpRequest cycle is complete
body: <p>Your Google Maps code structure looks something like this:</p>
  
  <pre><code>&lt;script&gt;
  function initMap() {
  
  }
  
  var locations = 
  [
          {lat: -31.563910, lng: 147.154312},
          {lat: -33.718234, lng: 150.363181}
  ]
  &lt;/script&gt;
  
  &lt;script async defer
      src="https://maps.googleapis.com/maps/api/js?key=API-key&amp;callback=initMap" &gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>The thing is, you want to populate <code>locations</code> via a call to the server (using XMLHttpRequest , i.e. a vanilla JavaScript AJAX call because you don't want to use jQuery). </p>
  
  <p>And you don't want the second script block (the call to the Google Maps API) to execute until  <code>locations</code> has successfully been populated.
  How would you achieve this via any of the following:</p>
  
  <ul>
  <li>A Callback ?</li>
  <li>JavaScript Promises ?</li>
  <li>Any other method you can think of?</li>
  </ul>
  
  <p>Also, is <a href="https://stackoverflow.com/a/14031458/1883050">a semaphore, as suggested here</a> a viable way to do this?</p>