- Author:
- b23
- Posted:
- November 24, 2007
- Language:
- JavaScript
- Version:
- Not specified
- Score:
- 1 (after 3 ratings)
I use this to integrate a google map in a form renderd by newforms. If someone click on the map and set a icon, the Latitude and Longitude data goes into the 2 form fields.
You need to generate a google API key (http://www.google.com/apis/maps/signup.html) for the GOOGLE_KEY variable.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | **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);
}
|
More like this
- Django Collapsed Stacked Inlines by applecat 1 year, 9 months ago
- Django Collapsed Stacked Inlines by mkarajohn 3 years, 11 months ago
- Dynamically adding forms to a formset. OOP version. by halfnibble 9 years, 6 months ago
- Convert multiple select for m2m to multiple checkboxes in django admin form by abidibo 11 years, 8 months ago
- Django admin inline ordering - javascript only implementation by ojhilt 12 years ago
Comments
why not to use 'geopy'? much simpler, you are doing it from python code, in e.g. save() method.
#
very useful tips thanks jerzyk and kioopi!
#
Please login first before commenting.