<link rel="stylesheet" href="/static/css/styles.css">
<div>
    <input hidden id="lat-lon" type="text" readonly name="lat-lon">
    <div id="map" class="google-map"></div>
</div>
<script>
    $(document).ready(function(){
        var latBox = $('#id_lat');
        var lonBox = $('#id_lon');
        var defaultLat = {{ GM_SETTINGS.lat }};
        var defaultLon = {{ GM_SETTINGS.lon }};
        var zoom = 15;
        {% if zoom %}
            zoom = {{ zoom }};
        {% endif %}
        if (latBox.val() === null || latBox.val() === ''){
            latBox.val(defaultLat);
        }
        if (lonBox.val() === null || lonBox.val() === ''){
            lonBox.val(defaultLon);
        }

        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: zoom,
            mapTypeId: 'hybrid',
            center: {lat: parseFloat(latBox.val()), lng: parseFloat(lonBox.val())}
        });

        var latLon = {lat: parseFloat(latBox.val()), lng: parseFloat(lonBox.val())};
        var marker = new google.maps.Marker({
            position: latLon,
            draggable: true,
            map: map,
            title: "Select Location"
        });

        google.maps.event.addListener(marker, 'dragend', function () {
            var position = marker.getPosition();
            latBox.val(parseFloat(position.lat()).toFixed(5));
            lonBox.val(parseFloat(position.lng()).toFixed(5));
        });

        setTimeout(function(){
            google.maps.event.trigger(map, 'resize');
        }, 1000);
    });
</script>
