1. <div id="map" style="height: 600px; width: 100%;"></div>
2. <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDfkA4_C7LmzGzFlPerInt6ndVTyOLpZ8k&libraries=places"></script>
3. <div><ul id="foodlist"></ul></div>
4. <script type="text/javascript">
5. function loadJSON(callback) {
6. var xobj = new XMLHttpRequest();
7. xobj.overrideMimeType("application/json");
8. xobj.open('GET', 'dcfood.json', true);
9. xobj.onreadystatechange = function () {
10. if (xobj.readyState == 4 && xobj.status == "200") {
11. callback(xobj.responseText);
12. }
13. };
14. xobj.send(null);
15. }
16. loadJSON(function(response) {
17. var fooddata = JSON.parse(response);
18. var map = new google.maps.Map(document.getElementById('map'), {
19. zoom: 11,
20. center: new google.maps.LatLng(38.8832182, -77.1323203),
21. mapTypeId: google.maps.MapTypeId.ROADMAP
22. });
24. var infowindow = new google.maps.InfoWindow();
26. var marker, i;
28. var foodlist = document.getElementById('foodlist');
30. fooddata.data.forEach(function(loc,index){
31. marker = new google.maps.Marker({
32. position: new google.maps.LatLng(loc.longitude, loc.latitude),
33. map: map
34. });
36. google.maps.event.addListener(marker, 'click', (function(marker, i) {
37. return function() {
38. infowindow.setContent(loc.longitude);
39. infowindow.open(map, marker);
40. }
41. })(marker, i));
43. var li = document.createElement("li");
44. li.innerHTML = "<b>" + loc.name + "</b>" + "<span>(" + loc.address + "): " + loc.description + "</span>";
45. foodlist.appendChild(li);
46. });
47. })
50. </script>

<div id="map" style="height: 600px; width: 100%;"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDfkA4_C7LmzGzFlPerInt6ndVTyOLpZ8k&libraries=places"></script>
<div><ul id="foodlist"></ul></div>
<script type="text/javascript">
  function loadJSON(callback) {
    var xobj = new XMLHttpRequest();
        xobj.overrideMimeType("application/json");
    xobj.open('GET', 'dcfood.json', true);
    xobj.onreadystatechange = function () {
          if (xobj.readyState == 4 && xobj.status == "200") {
          	callback(xobj.responseText);
          }
    };
    xobj.send(null);
  }
  loadJSON(function(response) {
    var fooddata = JSON.parse(response);
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 11,
      center: new google.maps.LatLng(38.8832182, -77.1323203),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    var foodlist = document.getElementById('foodlist');

    fooddata.data.forEach(function(loc,index){
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(loc.longitude, loc.latitude),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(loc.longitude);
          infowindow.open(map, marker);
        }
      })(marker, i));

      var li = document.createElement("li");
      li.innerHTML = "<b>" + loc.name + "</b>" + "<span>(" + loc.address + "): " + loc.description + "</span>";
  			foodlist.appendChild(li);
    });
  })


  </script>