title: Use JSON data from a URL to show Google Map Markers - how?
body: <p>The code below display map markers on a Google map, but each location lat and long is hard coded into the JS file. What's the best way to go about pulling the data from a URL instead?  Please note the script below also allows the user to click on a text link within the html and in doing so highlight a point on the map.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var stationList=[
   {"latlng":[37.7029,-121.9335],name:"Dublin, CA"},
   {"latlng":[37.6958,-121.9255],name:"Pleasanton CA"},
   {"latlng":[37.6931,-121.9262],name:"Pleasanton CA"}
  ]
  
  ;var infoWnd,mapCanvas;
  
  function initialize(){
   var mapDiv=document.getElementById("map_canvas");
   mapCanvas=new google.maps.Map(mapDiv);
   mapCanvas.setMapTypeId(google.maps.MapTypeId.ROADMAP);
   
   infoWnd=new google.maps.InfoWindow();
   
   var bounds=new google.maps.LatLngBounds();
   
   var station,i,latlng;
   for(i in stationList){station=stationList[i];
    latlng=new google.maps.LatLng(station.latlng[0],station.latlng[1]);
    bounds.extend(latlng);
    var marker=createMarker(mapCanvas,latlng,station.name);
    createMarkerButton(marker);
   }
  
   mapCanvas.fitBounds(bounds)
   ;}
  
  function createMarker(map,latlng,title){
   var marker=new google.maps.Marker({position:latlng,map:map,title:title});
   
   google.maps.event.addListener(marker,"click",function(){infoWnd.setContent("&lt;strong&gt;"+title+"&lt;/title&gt;");
   infoWnd.open(map,marker);});
   
   return marker;
  }
  
  function createMarkerButton(marker){
   var ul=document.getElementById("marker_list");
   var li=document.createElement("li");
   var title=marker.getTitle();li.innerHTML=title;ul.appendChild(li);
   google.maps.event.addDomListener(li,"click",function(){google.maps.event.trigger(marker,"click");});
  }
  
  google.maps.event.addDomListener(window,"load",initialize);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#map_canvas {
      width: 70%;
      padding-bottom: 40%;
      float: left;
   }
  ul#marker_list {
      float: left;
      width: 20%;
      background: #f9f9f9;
      border: 1px solid #888;
      margin: 0 0 0 5px;
      padding: 0;
    
    }
  ul#marker_list li {
      padding: 5px;
      list-style-type: none;
      color: #444;
      border-bottom: 1px solid  #888;
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"&gt;&lt;/script&gt;
  &lt;div id="map_canvas"&gt;&lt;/div&gt;
  &lt;ul id="marker_list"&gt;&lt;/ul&gt;
   </code></pre>
  </div>
  </div>
  </p>