Last active
April 4, 2022 09:45
-
-
Save gengue/b90763a6c0fc5ecae1ae to your computer and use it in GitHub Desktop.
Django admin Google maps Location picker (api v3)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | |
} | |
}); | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.location_picker_map { | |
width: 400px; | |
height: 300px; | |
border: 1px solid black; | |
padding: 2px; | |
display: inline-block; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
from django.db import models | |
from YOUR_APP.widgets import * | |
class Place(models.Model): | |
"""(Place description)""" | |
location = LocationField(blank=True, max_length=255) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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