{% 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}},
      scaleControl: false,
      scrollwheel: false,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(mapCanvas, mapOptions);
    var infowindow = new google.maps.InfoWindow();
    var iconMapping = {
      'blueIcon': 'https://maps.google.com/mapfiles/ms/icons/blue-dot.png',
      'redIcon': 'https://maps.google.com/mapfiles/ms/icons/red-dot.png',
      'greenIcon': 'https://maps.google.com/mapfiles/ms/icons/green-dot.png',
      'yellowIcon': 'https://maps.google.com/mapfiles/ms/icons/yellow-dot.png',
    };

    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,
            icon: iconMapping['{{pin.pin_color}}']
        });

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

    {% endfor %}

  }

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

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