**settings.py**
GOOGLE_KEY = "xxx"
**models.py**
map_lat = models.CharField(u'Latitude', maxlength=25, blank=True, null=True)
map_lon = models.CharField(u'Longitude', maxlength=25, blank=True, null=True)
**template**
<script src="http://maps.google.com/maps?file=api&v=2&key={{ GOOGLE_KEY }}" type="text/javascript"></script>
<script src="{{ MEDIA_URL }}js/gmapselect.js" type="text/javascript"></script>
<body onLoad="loadMap()">
<div id="map" style="width: 350px; height: 300px"></div><br/>
<div id="mypoint">Click on map to get Lat/Lon Values<br/></div>
<form enctype="multipart/form-data" action="" method="post" id="upload_form">
<table>
{{ form.as_table }}
<tr>
<td colspan="2"><input type="submit" name="submit" value="submit" class="submit" /></td>
</tr>
</table>
</form>
**gmapselect.js**
function loadMap(){
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
//set map center (vienna)
map.setCenter(new GLatLng(48.1985912972919, 16.367568969726562), 12);
GEvent.addListener(map, "click", function(overlay, point){
map.clearOverlays();
if (point) {
map.addOverlay(new GMarker(point));
map.panTo(point);
msg = "Latitude: "+point.lat()+"<br />"+"Longitude: "+point.lng();
document.getElementById("mypoint").innerHTML = msg;
document.getElementById("id_map_lat").value = point.lat(); //models field name
document.getElementById("id_map_lon").value = point.lng(); //models field name
}
});
}
// arrange for our onload handler to 'listen' for onload events
if (window.attachEvent) {
window.attachEvent("onload", function() {
loadMap(); // Internet Explorer
});
} else {
window.addEventListener("load", function() {
loadMap(); // Firefox and standard browsers
}, false);
}