Code Monkey home page Code Monkey logo

django-google-maps's Introduction

django-google-maps is a simple application that provides the basic hooks into google maps V3 api for use in Django models from Django version 1.11+.

Starting with django-google-maps version (0.7.0), Django 1.11+ is required because Django changed their widget template rendering system. Version 0.8.0 supports Django 2.0+, and as such removes support for Python 2.7

I’m using this to allow someone from the admin panels to type a freeform address, have the address geocoded on change and plotted on the map. If the location is not 100% correct, the user can drag the marker to the correct spot and the geo coordinates will update.

Status

Build Status

USAGE:

  • include the django_google_maps app in your settings.py

  • Add your Google Maps API Key in your settings.py as GOOGLE_MAPS_API_KEY

  • create a model that has both an address field and geolocation field

    from django.db import models
    from django_google_maps import fields as map_fields
    
    class Rental(models.Model):
        address = map_fields.AddressField(max_length=200)
        geolocation = map_fields.GeoLocationField(max_length=100)
  • in the admin.py include the following as a formfield_override

    from django.contrib import admin
    from django_google_maps import widgets as map_widgets
    from django_google_maps import fields as map_fields
    
    class RentalAdmin(admin.ModelAdmin):
        formfield_overrides = {
            map_fields.AddressField: {'widget': map_widgets.GoogleMapsAddressWidget},
        }
  • To change the map type (hybrid by default), you can add an html attribute on the AddressField widget. The list of allowed values is: hybrid, roadmap, satellite, terrain

    from django.contrib import admin
    from django_google_maps import widgets as map_widgets
    from django_google_maps import fields as map_fields
    
    class RentalAdmin(admin.ModelAdmin):
        formfield_overrides = {
            map_fields.AddressField: {
              'widget': map_widgets.GoogleMapsAddressWidget(attrs={'data-map-type': 'roadmap'})},
        }
  • To change the autocomplete options, you can add an html attribute on the AddressField widget. See https://developers.google.com/maps/documentation/javascript/places-autocomplete#add_autocomplete for a list of available options

    import json from django.contrib import admin
    from django_google_maps import widgets as map_widgets
    from django_google_maps import fields as map_fields
    
    class RentalAdmin(admin.ModelAdmin): formfield_overrides = {
        map_fields.AddressField: { ‘widget’:
        map_widgets.GoogleMapsAddressWidget(attrs={
          ‘data-autocomplete-options’: json.dumps({ ‘types’: [‘geocode’,
          ‘establishment’], ‘componentRestrictions’: {
                      'country': 'us'
                  }
              })
          })
        },
    }

That should be all you need to get started.

I also like to make the geolocation field readonly in the admin so a user (myself) doesn't accidentally change it to a nonsensical value. There is validation on the field so you can't enter an incorrect value, but you could enter something that is not even close to the address you intended.

When you're displaying the address back to the user, just request the map using the geocoordinates that were saved in your model. Maybe sometime when I get around to it I'll see if I can create a method that will build that into the model.

django-google-maps's People

Contributors

madisona avatar mattjmorrison avatar duologic avatar bashu avatar devharam avatar dlenskyi avatar dfejgelis avatar khornberg avatar matthewelwell avatar mattfanto avatar pulsedemon avatar stianjensen avatar dcreekp avatar tsredanovic avatar goldhand avatar kernelpan1k avatar thomashkim avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.