Chicago Data Portal API example

by Alex Azuero

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=true"></script>
<title>Google Maps Example</title>

<body>
    <input class="checkbox" id="zip" name="Dial-a-Ride" type="checkbox" value="60645" />60645
    <!--input type="text" id="zip" value='search'-->
    <!--input type="button" id="loadZip" value="search"-->
    <h1>Failed Food Inspections in 60645</h1>
    <div id="map" /> 
</body>

CSS

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

JavaScript

$(window).load(function() {
    
    geocoder = new google.maps.Geocoder();
    // Construct the catalog query string
    baseURL = 'https://data.cityofchicago.org/resource/4ijn-s7e5.json?results=fail&';
    searchURL = "";
    
    $("#zip").click (function(){
        // set address to text input value
        var address = $("#zip").val();
   
        // call geocoder
            geocoder.geocode( { 'address': address}, function(results, status)        {
            if (status == google.maps.GeocoderStatus.OK) {
                //console.log (results); 
                // make sure it's a valid Chicago zip
                if (results[0].formatted_address.indexOf("Chicago") == 0) {                
                    map.setCenter(results[0].geometry.location);
                    map.setZoom (15);
                    searchURL = baseURL + "zip=" + address;
                    loadMarkers(searchURL);
                }
                else {
                    alert('Please enter a valid Chicago zip code'); 
                    $("#zip").val("");
                    $("#zip").focus();
                }
                
            } else {
              alert('Geocode was not successful for the following reason: ' + status);
            }
          });
    
    
    });
    
    
    // Intialize our map
    var center = new google.maps.LatLng(41.8369,-87.6847);
    var mapOptions = {
      zoom: 10,
      center: center
    }
    var map = new google.maps.Map(document.getElementById("map"), mapOptions);
    
    
    function loadMarkers(strURL) {
        // Retrieve our data and plot it
        $.getJSON(strURL, function(data, textstatus) {
              //console.log(data);
              $.each(data, function(i, entry) {
                    var contentString = '<div id="content">'+
                      '<div id="siteNotice">'+
                      '</div>'+
                      '<h1 id="firstHeading" class="firstHeading">' + entry.dba_name + '</h1>'+
     ...