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 3 years ago
  2. Django Collapsed Stacked Inlines by mkarajohn 5 years, 2 months ago
  3. Dynamically adding forms to a formset. OOP version. by halfnibble 10 years, 10 months ago
  4. Convert multiple select for m2m to multiple checkboxes in django admin form by abidibo 12 years, 11 months ago
  5. Django admin inline ordering - javascript only implementation by ojhilt 13 years, 3 months 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.