{% load sekizai_tags %}

<div id="map" style="height: {{map.height}}px;"></div>

{% addtoblock "js" %}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
  function initialize(){
    var centerLat = {{map.lat|safe}};
    var centerLng = {{map.lng|safe}};
    var mapCanvas = document.getElementById('map');
    var mapOptions = {
      center: new google.maps.LatLng(centerLat, centerLng),
      zoom: {{map.zoom}},
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(mapCanvas, mapOptions);
    var infowindow = new google.maps.InfoWindow();

    {% for pin in pins %}
      
        var marker{{pin.pk}} = new google.maps.Marker({
            position: new google.maps.LatLng({{pin.lat|safe}}, {{pin.lng|safe}}),
            map: map,
        });


        var infowindow{{pin.pk}} = new google.maps.InfoWindow({
          content: "<h5>{{pin.name|safe}}</h5><div>{{pin.street|safe}}</div><div>{{pin.postal_code}} {{pin.city}}</div>"
        });

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

    {% endfor %}
  }

  google.maps.event.addDomListener(window, 'load', initialize);

</script>
{% endaddtoblock "js" %}