title: Using the response from an asynchronous call with the Google Maps API
body: <p>I have a .json file that I'm trying to import as a text string.</p>
  
  <p>This is the exact file contents:</p>
  
  <pre><code>{ "type": "Polygon", "coordinates": [ [ [ 1.5887868, 50.8315241 ], [ 1.5830702, 50.8466931 ].......  ] ] ] }
  </code></pre>
  
  <p>I'm trying to import it using this:</p>
  
  <pre><code>jsonString = jQuery.get('./polygons/1.json', function(data) {    
    console.log(data);            
  }); 
  </code></pre>
  
  <p>However, <code>console.log(data)</code> is coming across as an array, and I don't want it to - I just want the literal text string, just as it is in the file.</p>
  
  <p><img src="https://i.stack.imgur.com/znqoI.png" alt="enter image description here"></p>
  
  <p>How do I accomplish this?</p>
  
  <h1>Update</h1>
  
  <p>So my entire code is:</p>
  
  <pre><code>jsonString = jQuery.get('./polygons/1.json', function(data) {    
  
    return JSON.stringify(data);
  
  });
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/tjS3s.png" alt="enter image description here"></p>
  
  <p>But now I get this screenshot below:</p>
  
  <p>I guess it's the <code>responseText</code> that I'm trying to get out.  Why is <code>jQuery.get</code> adding all this additional info into my file?  What am I doing wrong?</p>
  
  <h1>Second Update</h1>
  
  <p>I always feel bad when someone takes <em>their</em> time to explain something to me, and I don't understand it.  <strong>So,</strong> this whole thing exists so that I can pull <strong>dynamic</strong> data into <code>jsonString</code>, depending on what the user wants.</p>
  
  <p>Right now though, I'm having to accomplish this feat by making individual files with the geodata coordinates, then utilizing it using <code>map.data.loadGeoJson('./maps_polygons/' + territory + '.json');</code></p>
  
  <pre><code>function mapClick(data) {
  
  territory = data; //the section of the map that the user clicks on, e.g. `california` or `texas`
  
  var mapOpt = {
    center:new google.maps.LatLng(50.477971, 0.482999),  
    zoom:8,  
    };
  
  map = new google.maps.Map(document.getElementById("googleMap"),mapOpt);
  
  map.data.loadGeoJson('./maps_polygons/' + territory + '.json');
  
  
  google.maps.event.addDomListener(window, 'load', initialize);
  
  }
  </code></pre>
  
  <p>Now, this WORKS, but I felt that it <strong>must</strong> be incredibly inefficient, so I wanted to hold all of the coordinates in a single file, and bring them in dynamically as the main input from <code>function mapClick(data)</code> changed.  This has GOT to be possible, and from what you've all shown me, I can write an <code>ajax</code> query, or use <code>jQuery.get</code> from <strong>within a function</strong>, and that will bring the json string in, but that does me no good, because it's stuck inside of that function and I can't get to it.  </p>
  
  <p>This is my frustration...</p>
  
  <h1>Final Update</h1>
  
  <p>Okay - shout-out to <a href="http://javascriptissexy.com/understand-javascript-callback-functions-and-use-them/" rel="nofollow noreferrer">this page</a> and <a href="https://stackoverflow.com/questions/22603220/uncaught-invalidvalueerror-not-a-feature-or-featurecollection">this page</a>, as well as @Lye-Fish for finally helping me understand how this all works.</p>
  
  <p>In searching SO tonight, I found tons of posts about aspects of this topic, so I wanted to die it all in how I finally got these two things to work:</p>
  
  <ol>
  <li>The idea of <em>getting something out of an ajax call</em> (the original reason for my post)</li>
  <li>How to tie that back into the Google Maps API.</li>
  </ol>
  
  <p><strong>The HTML</strong></p>
  
  <pre><code>&lt;area shape="poly" coords="..." href="#" alt="california" onClick="mapClick(alt)"/&gt;
  </code></pre>
  
  <p><strong>The Javascript</strong></p>
  
  <pre><code>function mapClick(data) {
  
  territory = data;
  
  function getPolygons(territory, passTodoWork) {
      jQuery.get('./maps_polygons/'+ territory +'.json', function(data, status, jqXHR) {    
          var coordinates = JSON.parse(jqXHR.responseText);
          passTodoWork(territory,coordinates);
      });
  }
  function drawMap(firstItem, secondItem) {
      var mapOpt = {
      center:new google.maps.LatLng(50.367247, 2.745326),  
      zoom:8,  
      };
  
    map = new google.maps.Map(document.getElementById("googleMap"),mapOpt);
  
  
    map.data.addGeoJson(secondItem);
  
    map.data.setStyle({  
      fillColor: '#2b86cc',
      strokeColor: '#1e5c8c'
    });
  
  
    google.maps.event.addDomListener(window, 'load', initialize);
  }
  
  getPolygons(territory, drawMap);
  
  }
  </code></pre>
  
  <p><em>note, I don't utilize <code>territory</code> in the final <code>drawMap</code> function - that's part of another piece of code that made this all too long to prove the point...</em></p>