https://github.com/20tab/twentytab-gmapsmarkers
A django widget with select2 integration that uses google geocode api to search place and create map with markers
https://github.com/20tab/twentytab-gmapsmarkers
Last synced: 3 months ago
JSON representation
A django widget with select2 integration that uses google geocode api to search place and create map with markers
- Host: GitHub
- URL: https://github.com/20tab/twentytab-gmapsmarkers
- Owner: 20tab
- License: mit
- Created: 2014-05-23T10:49:03.000Z (about 12 years ago)
- Default Branch: master
- Last Pushed: 2016-04-20T09:53:48.000Z (about 10 years ago)
- Last Synced: 2025-12-16T14:16:16.541Z (6 months ago)
- Language: JavaScript
- Size: 623 KB
- Stars: 2
- Watchers: 2
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
twentytab-gmapsmarkers
===============
A django widget with [Select2](http://ivaynberg.github.com/select2/) integration that uses [google geocode](https://developers.google.com/maps/documentation/geocoding/) api to search places and create maps with markers
## Installation
Use the following command: pip install twentytab-gmapsmarkers
## Configuration
```py
INSTALLED_APPS = {
...,
'gmapsmarkers',
...
}
GMAPS_API_KEY = "xxxxxxxxxxxxxxxxxxxx"
GMAPS_LANGUAGE_CODE = "en" # default value
```
twentytab-gmaps will set his own jquery plugin. If you already use yours you have to define the following parameters in your settings:
```py
STATIC_URL = u'/static/'
JQUERY_LIB = 'path_to_jquery'
SELECT2_LIB = 'path_to_select2_js'
SELECT2_CSS_LIB = 'path_to_select2_css'
```
- Static files
Run collectstatic command or map static directory.
## Usage
```py
from django.db import models
from gmapsmarkers.fields import GmapsField, GeotypeField
class MyClass(models.Model):
address = GmapsField(
plugin_options={
'geocode_field': 'geocode',
'type_field': 'geo_type',
'allowed_types': ['country', 'administrative_area_level_1']
},
select2_options={'width': '300px'}
)
geocode = models.CharField(max_length=250)
geo_type = GeotypeField()
def __unicode__(self):
return self.address
```
## Google geocode results
The widget binds a javascript event (gmaps-click-on-marker) on GmapsField that can capture it,
sending back the json result given by google geocode api.
For example:
```js
jQuery(function($){
$("#id_address").on('gmaps-click-on-marker', function(e, data){
console.log('gmaps-click-on-marker');
console.log(data);
console.log($(this))
});
});
```