{% extends "easy_maps/map.html" %}

{% block html %}
<div id="map-canvas-{{ map.pk }}" class="easy-map-googlemap wedding-map">
  {% block noscript %}{{ block.super }}{% endblock %}
  {% if not map.computed_address %}<!-- geocoding error -->{% endif %}
</div>
{% endblock %}

{% block extra_js %}

    // InfoWindow with wedding location
    var weddingPos = {
      lat: {{ lat }},
      lng: {{ long }},
    };
    weddingInfoWindow = new google.maps.InfoWindow;
    weddingInfoWindow.setPosition(weddingPos);
    weddingInfoWindow.setContent('The Wedding :)');
    weddingInfoWindow.open(map);

    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        var yourPos = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        };

        // InfoWindow with your location
        yourInfoWindow = new google.maps.InfoWindow;
        yourInfoWindow.setPosition(yourPos);
        yourInfoWindow.setContent('Your Location :(');
        yourInfoWindow.open(map);

        // Update the map to fit
        var bounds = new google.maps.LatLngBounds();
        bounds.extend(new google.maps.LatLng(weddingPos.lat, weddingPos.lng));
        bounds.extend(new google.maps.LatLng(yourPos.lat, yourPos.lng));
        map.fitBounds(bounds);

      }, function() {
        handleLocationError(true, yourInfoWindow, map.getCenter());
      });
    } else {
      // Browser doesn't support Geolocation
      handleLocationError(false, yourInfoWindow, map.getCenter());
    }

    function handleLocationError(browserHasGeolocation, infoWindow, pos) {
      infoWindow.setPosition(pos);
      infoWindow.setContent(browserHasGeolocation ?
                            'Error: The Geolocation service failed.' :
                            'Error: Your browser doesn\'t support geolocation.');
      infoWindow.open(map);
    }

{% endblock %}
