schools.html

--- 
layout: default 
---

{% assign schools = site.data.schools %}

<style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 680px;
      }
      /* Just use .gm-style-iw */
    .gm-style-iw {
        width: 300px; 
        min-height: 150px;
    }

</style>



{% comment %} 

TODO: 
- when clicking another link remove previous infowindow
- resize infowindows to fit
- make better icons
- use places API to fill in detailed info
- change colors to match

{% endcomment %}

<div class="list-group mb-4 d-flex flex-row flex-wrap"> 
    <h1>Schools we're working with:</h1>
    {% for school in schools %} 
        <a class="place-{{ school.placeId }} marker-trigger list-group-item list-group-item-action w-50" href="#" data-placeid="{{ school.placeId }}" data-name="{{ school.name }}">{{ school.name }}</a>
    {% endfor %}
    {% comment %} construct list of school links that trigger info window {% endcomment %}
</div>

<div id="map" class="mb-4"></div>

<script>

    function initMap() {

        var map = new google.maps.Map(document.getElementById('map'))

        var geocoder = new google.maps.Geocoder;
        
        schools = { }
        {% for school in schools %} 
        schools['{{ school.placeId }}'] = '{{ school.name }}'
        {% endfor %}
        

        var promisedResults = []

        for (let i in schools) {
            promisedResults.push(getResByPlaceId(i, geocoder, map));
        }

        Promise.all(promisedResults).then(function(resolvedResults){
            var bounds = new google.maps.LatLngBounds(); // boundaries for all coords of each marker
            var locations = []
            var markers = {} 
            resolvedResults.forEach(function(res) {
                let latlng = {lat: res[0].geometry.location.lat(), lng: res[0].geometry.location.lng()} // get coords for each res

                let name = schools[res[0].place_id] // may be a good use for Places

                {% comment %} console.log(res[0]) {% endcomment %}

                let county = res[0].address_components[2];
                let state = res[0].address_components[4];
                var countyStateStr = "";

                if (county == undefined || state == undefined) {
                    countyStateStr = '';
                } else {
                    countyStateStr += county.short_name;
                    countyStateStr += ', ';
                    countyStateStr += state.short_name;
                }


                let contentString = '<div id="content">' +
                    "<div style='float:left'><img src='//i.stack.imgur.com/g672i.png'></div>" +
                    "<div style='float:right; padding: 10px;'><b>" + name + "</b><br/>" + countyStateStr +
                    '</div>'; // to be changed

                let infowindow = new google.maps.InfoWindow({
                    content: contentString, // construct info window
                    // maxWidth: 200
                });

                let marker = new google.maps.Marker({  // construct marker and attach map
                    map: map,
                    position: latlng
                })

                marker.addListener('click', function() {
                    // infoWindow.close();
                    infowindow.open(map, marker); // add default click listener to each marker
                    map.panTo(this.getPosition());
                    map.setZoom(15);
                    let currentPlace = res[0].place_id;
                    $('.active').toggleClass('active');
                    $('.place-' + currentPlace).toggleClass('active');
                });

                markers[res[0].place_id] = marker; // construct dictionary of place_id => markers

                locations.push(latlng); // construct the array of latlng coords
            });

            $(".marker-trigger").on("click", function() {
               let marker = markers[$(this).data("placeid")] // retrieve the corresponding marker based on the buttons place id
               google.maps.event.trigger(marker, 'click'); // trigger the info window to open
            })

            for (var m in locations) { 
                bounds.extend(locations[m]); // construct boundaries
            }

            map.setCenter(bounds.getCenter()); // recenter view around all markers based on constructed boundaries

            {% comment %} google.maps.event.addListenerOnce(map, 'bounds_changed', function(event) {
                this.setZoom(map.getZoom()-1);

                if (this.getZoom() > 15) {
                    this.setZoom(15);
                }
            }); {% endcomment %}

            map.fitBounds(bounds); // resize to fit map to constructed boundaries
        })
        
    }

    function getResByAddress(address, geocoder) {
        return new Promise(function(resolve, reject) {
            geocoder.geocode({'address': address}, function(results, status) {
                if (status === 'OK') {
                    resolve(results);
                } else {
                    reject(new Error());
                }
            })
        })
    } 

    function getResByPlaceId(placeId, geocoder, callback) {
        return new Promise(function(resolve, reject) {
            geocoder.geocode({'placeId': placeId}, function(results, status) {
                if (status === 'OK') {
                    resolve(results);
                } else {
                    reject(new Error());
                }
            })
        })
    } 
</script>

<script async defer
src="https://maps.googleapis.com/maps/api/js?key={{ site.google_api_key }}&callback=initMap">
</script>