Socrata Example

by gricha2380

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=true"></script>
<div id="map"></div>

CSS

#map {
   height: 480px;
   width: 640px
 }
 
 #container {
   width: 700px;
 }

JavaScript

$(document).ready(function() {
  // Intialize our map
  var center = new google.maps.LatLng(21.291, -157.859);
  var mapOptions = {
    zoom: 12,
    center: center,
    draggable: false
  };
  var map = new google.maps.Map(document.getElementById("map"), mapOptions);

  // Retrieve our data and plot it
  $.ajax({
      url: "https://data.hawaii.gov/resource/b2y9-ab7v.json",
      data: {
        island: "Oahu",
        "$where": "within_circle(location_1, 21.291, -157.859, 10000)",
        "$$app_token": "MmFqykL8mygeptjRHvgrmqcHL"
      }
    })
    .done(function(data) {
    // Add em!
    $.each(data, function(i, entry) {
      // Construct a flyout
      var content = '<div class="flyout"><ul><li><em>Name:</em> ' + entry.farmer_s_market + '</li><li><em>Open:</em> ' + entry.time + '</li></ul></div>';

      var infowindow = new google.maps.InfoWindow({
        content: content
      });

      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(entry.location_1.coordinates[1],
                                         entry.location_1.coordinates[0]),
        map: map,
        title: entry.farmer_s_market
      });

      google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map, marker);
      });
    });
  });
});