Login

Get Latitude and Longitude from google maps

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&amp;v=2&amp;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

  1. Django Collapsed Stacked Inlines by applecat 1 year, 10 months ago
  2. Django Collapsed Stacked Inlines by mkarajohn 3 years, 11 months ago
  3. Dynamically adding forms to a formset. OOP version. by halfnibble 9 years, 7 months ago
  4. Convert multiple select for m2m to multiple checkboxes in django admin form by abidibo 11 years, 8 months ago
  5. Django admin inline ordering - javascript only implementation by ojhilt 12 years ago

Comments

jerzyk (on December 17, 2007):

why not to use 'geopy'? much simpler, you are doing it from python code, in e.g. save() method.

#

b23 (on July 18, 2008):

very useful tips thanks jerzyk and kioopi!

#

Please login first before commenting.