places.html

---
layout: entities
title: Places
---

  <style>
   #map {
     width: 100%;
     height: 400px;
     margin-bottom: 20px;
     background-color: grey;
   }
  </style>
  <div id="map"></div>
  <script>
    function initMap() {
      var map = new google.maps.Map(document.getElementById('map'), {
         mapTypeId: google.maps.MapTypeId.TERRAIN
      });

      var marker; 
      var bounds = new google.maps.LatLngBounds();

      {% for place in site.data.places %}
      {% if place.data.geo %}
      latlng = new google.maps.LatLng({{ place.data.geo.latitude }}, {{ place.data.geo.longitude }})
      marker = new google.maps.Marker({
        title: "{{ place.name }}",
        position: latlng,
        map: map
      });
      google.maps.event.addListener(marker, 'click', function () {
        window.location.href = '{{ place.name | slugify}}/';
      });

      bounds.extend(latlng);
      {% endif %}
      {% endfor %}

      map.fitBounds(bounds);
    }
  </script>
  <script async defer
  src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAKirUd8aZPsiObFFH7c-hv5P1jpvBjaeQ&callback=initMap">
  </script>

<ul>
{% for place in site.data.places %}
<li><a href="{{ place.name | slugify}}/">{{ place.name }}</a></li>
{% endfor %}
</ul>