Socrata Example B

new

by Brent Coder

HTML

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

<body>
    <div id="map" /> 
</body>

CSS

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

JavaScript

$(window).load(function() {
    // Construct the catalog query string
    url = 'http://data.ct.gov/resource/9k2y-kqxn.json?organization_type=Public%20School%20Districts&$$app_token=CGxaHQoQlgQSev4zyUh5aR5J3';
     var infoWindow = new google.maps.InfoWindow();
    var marker = [];
    // Intialize our map
    var center = new google.maps.LatLng(41.7656874,-72.680087);
    var mapOptions = {
      zoom: 8,
      center: center
    }
    var map = new google.maps.Map(document.getElementById("map"), mapOptions);
    
    // Retrieve our data and plot it
    $.getJSON(url, function(data, textstatus) {
          //console.log(data);
          
          $.each(data, function(i, entry) {
                  //console.log(entry.phone);
                  //console.log(entry.name);
                  marker = new google.maps.Marker({
                  position: new google.maps.LatLng(entry.location_1.latitude, 
                                                   entry.location_1.longitude),
                  map: map,
                  
                  title: entry.name,
                  id: i
            
              });
              //console.log(entry);
              infowindow = new google.maps.InfoWindow({
                  //console.log(data.district_name[i]);
                    //content: data[i].district_name
                    position: new google.maps.LatLng(entry.location_1.latitude, 
                                                   entry.location_1.longitude),
                    
                    content: entry.name,
                    id: i
                     });
           (function (marker, data) {
                google.maps.event.addListener(marker, "click", function (e) {
                    //Wrap the content inside an HTML DIV in order to set height and width of InfoWindow.
                    infoWindow.setContent(entry.name);
                    infoWindow.open(map, marker);
                });
            })(marker, data);
         ...