Untitled

{% extends "base.html" %}
{% block content %}
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<body onload='initialize()'>
    <div id=lat></div>
    <div id=long>
    </div>
</body><body>
  Lat:
    <input id="lat" name="form.geolat" val="40.713956" />
  Long:
    <input id="long" name="form.geolong" val="74.006653" />
    <div id="map_canvas" style="width: 500px; height: 250px;"></div>

</body>
<script>
var map;

    function initialize() {
        var myLatlng = new google.maps.LatLng({{ lat}}, {{ long }});

        var myOptions = {
            zoom: 8,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        var marker = new google.maps.Marker({
            draggable: true,
            position: myLatlng,
            map: map,
            title: "Your location"
        });

        google.maps.event.addListener(marker, 'dragend', function (event) {
            document.getElementById("lat").value = event.latLng.lat();
            document.getElementById("long").value = event.latLng.lng();
        });

        // close popup window
        google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
        });

    }
    google.maps.event.addDomListener(window, "load", initialize());
    </script>
{% endblock %}