Skip to content

Instantly share code, notes, and snippets.

@gengue
Last active April 4, 2022 09:45
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save gengue/b90763a6c0fc5ecae1ae to your computer and use it in GitHub Desktop.
Save gengue/b90763a6c0fc5ecae1ae to your computer and use it in GitHub Desktop.
Django admin Google maps Location picker (api v3)
google.load("maps", "3");
$(document).unload(function(){
GUnload();
});
$(document).ready(function(){
$("input.location_picker").each(function (i) {
var map = document.createElement('div');
map.className = "location_picker_map";
this.parentNode.insertBefore(map, this);
$(this).css('display','none');
var lat = 11.241944;
var lng = -74.205278;
var self = this;
if (this.value.split(',').length === 2) {
var values = this.value.split(',');
lat = values[0];
lng = values[1];
}
var latitude = parseFloat(lat);
var longitude = parseFloat(lng);
var center = new google.maps.LatLng(latitude, longitude)
this.value = String(latitude) + "," + String(longitude);
var mapOptions = {
center: { lat: latitude, lng: longitude},
zoom: 13
};
var map = new google.maps.Map(map, mapOptions);
var marker = new google.maps.Marker({
position: center,
map : map
});
google.maps.event.addListener(map, 'click', function(event) {
self.value = event.latLng.lat() + "," + event.latLng.lng();
if (marker === null || marker === undefined) {
marker = new google.maps.Marker({
position: event.latLng,
map : map
});
} else {
marker.setPosition(event.latLng);
}
});
});
});
.location_picker_map {
width: 400px;
height: 300px;
border: 1px solid black;
padding: 2px;
display: inline-block;
}
from django.db import models
from YOUR_APP.widgets import *
class Place(models.Model):
"""(Place description)"""
location = LocationField(blank=True, max_length=255)
from django import forms
from django.db import models
from django.conf import settings
class LocationPickerWidget(forms.TextInput):
class Media:
css = {
'all': (
settings.STATIC_URL + 'css/location_picker.css',
)
}
js = (
'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js',
'http://www.google.com/jsapi?key=' + settings.MAPS_API_KEY,
settings.STATIC_URL + 'js/jquery.location_picker.js',
)
def __init__(self, language=None, attrs=None):
self.language = language or settings.LANGUAGE_CODE[:2]
super(LocationPickerWidget, self).__init__(attrs=attrs)
def render(self, name, value, attrs=None):
if None == attrs:
attrs = {}
attrs['class'] = 'location_picker'
return super(LocationPickerWidget, self).render(name, value, attrs)
class LocationField(models.CharField):
def formfield(self, **kwargs):
kwargs['widget'] = LocationPickerWidget
return super(LocationField, self).formfield(**kwargs)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment