title: Load JSON data for Google MAPS API v3
body: <p>starting from the following example code (from <a href="https://google-developers.appspot.com/maps/documentation/javascript/overlays#SimpleIcons" rel="nofollow noreferrer">https://google-developers.appspot.com/maps/documentation/javascript/overlays#SimpleIcons</a>)</p>
  
  <pre><code>   &lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no" /&gt;
      &lt;style type="text/css"&gt;
        html { height: 100% }
        body { height: 100%; margin: 0; padding: 0 }
        #map_canvas { height: 100% }
      &lt;/style&gt;
      &lt;script type="text/javascript"
        src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCHgCs40BzMLmN2-GpJ-liYfcYsas-VVsI&amp;sensor=false"&gt;
      &lt;/script&gt;
      &lt;script type="text/javascript"&gt;
  function initialize() {
    var mapOptions = {
      zoom: 10,
      maxZoom: 12,
      center: new google.maps.LatLng(-33.9, 151.2),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"),
                                  mapOptions);
  
    setMarkers(map, beaches);
  }
  
  /**
   * Data for the markers consisting of a name, a LatLng and a zIndex for
   * the order in which these markers should display on top of each
   * other.
   */
  
   var beaches = (function () {
      var json = null;
      $.ajax({
          'async': false,
          'global': false,
          'url': data.php,
          'dataType': "json",
          'success': function (data) {
              json = data;
          }
      });
      return json;
      alert("OK, data loaded");
  }); 
  
  
  
  /*var beaches = [
    ['Stuttgart', 48.766700, 9.183330, 4],
    ['Coogee Beach', -33.923036, 151.259052, 5],
    ['Cronulla Beach', -34.028249, 151.157507, 3],
    ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
    ['Maroubra Beach', -33.950198, 151.259302, 1]
  ];
  */
  function setMarkers(map, locations) {
    // Add markers to the map
  
    // Marker sizes are expressed as a Size of X,Y
    // where the origin of the image (0,0) is located
    // in the top left of the image.
  
    // Origins, anchor positions and coordinates of the marker
    // increase in the X direction to the right and in
    // the Y direction down.
    var image = new google.maps.MarkerImage('images/beachflag.png',
        // This marker is 20 pixels wide by 32 pixels tall.
        new google.maps.Size(20, 32),
        // The origin for this image is 0,0.
        new google.maps.Point(0,0),
        // The anchor for this image is the base of the flagpole at 0,32.
        new google.maps.Point(0, 32));
    var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png',
        // The shadow image is larger in the horizontal dimension
        // while the position and offset are the same as for the main image.
        new google.maps.Size(37, 32),
        new google.maps.Point(0,0),
        new google.maps.Point(0, 32));
        // Shapes define the clickable region of the icon.
        // The type defines an HTML &lt;area&gt; element 'poly' which
        // traces out a polygon as a series of X,Y points. The final
        // coordinate closes the poly by connecting to the first
        // coordinate.
    var shape = {
        coord: [1, 1, 1, 20, 18, 20, 18 , 1],
        type: 'poly'
    };
    for (var i = 0; i &lt; locations.length; i++) {
      var beach = locations[i];
      var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
      var marker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          shadow: shadow,
          icon: image,
          shape: shape,
          title: beach[0],
          zIndex: beach[3]
      });
    }
  }
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body onload="initialize()"&gt;
      &lt;div id="map_canvas" style="width:100%; height:100%"&gt;&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>can I load the points from an external file?
  Using this solution <a href="https://stackoverflow.com/questions/2177548/load-json-into-variable">load json into variable</a> I made the following:</p>
  
  <pre><code>var beaches = (function () {
      var json = null;
      $.ajax({
          'async': false,
          'global': false,
          'url': data.json,
          'dataType': "json",
          'success': function (data) {
              json = data;
          }
      });
      return json;
  })(); 
  </code></pre>
  
  <p>but the file beaches list doesn't seem to be a well formatted JSON file!
  file data.json:</p>
  
  <pre><code>beaches: [
    ['Bondi Beach', -33.890542, 151.274856, 4],
    ['Coogee Beach', -33.923036, 151.259052, 5],
    ['Cronulla Beach', -34.028249, 151.157507, 3],
    ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
    ['Maroubra Beach', -33.950198, 151.259302, 1]
  ];
  </code></pre>