Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

django map widget console showing DjangoGooglePointFieldWidget Uncaught ReferenceError

I'm trying to implement the django map widget https://github.com/erdem/django-map-widgets

But there is no map appearing and i have this in the browser console

Uncaught ReferenceError: DjangoGooglePointFieldWidget is not defined

in settings.py, i have

INSTALLED_APPS = [
...
    'mapwidgets',
]

MAP_WIDGETS = {
    "GoogleStaticMapWidget": (
        ("zoom", 15),
        ("size", "320x320"),
    ),
    "GoogleStaticMapMarkerSettings": (
        ("color", "green"),
    ),
    "GOOGLE_MAP_API_KEY": "AIzaSyA1fXsJSKqZH_Bl9d9wueJMlpXd-6tEJy0"
}

in my model.py

class CompanySettingEdit(forms.ModelForm):
     display_companyname = forms.CharField(label='Display Company Name', max_length=50, required=True)
    class Meta:
        model = Company
        fields = ("display_companyname","location_point")

        widgets = {
            'location_point': GooglePointFieldWidget,
        }

UPDATE: my static files configuration in settings.py

STATIC_URL = '/static/'

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, "../projectapp/static"),
)

PROJECT_DIR = os.path.dirname(os.path.abspath(__file__))
STATIC_ROOT = os.path.join(PROJECT_DIR, '../../../static_root')

after running python manage.py collectstatic, static files are copied to another directory static_root - https://imgur.com/a/TmhYr. notice that mapwidgets directory is not in the original project static directory. im running on development, i notice bootstrap static files are using the the file in static directory and not static_root

Am I missing something ? to I need to load anything in the template ?

like image 439
Axil Avatar asked Dec 19 '17 08:12

Axil


2 Answers

This was encountered before. The possible solutions:

  1. Make sure you run python manage.py collectstatic so that the third-party static files are copied to STATIC_ROOT (more in their readme)
  2. If you are running in develoment mode, you must add static files serving view for urls (Helper link #1 and #2)
  3. Make sure your template also has {{form.media}} somewhere in <head> or at the end of your <body> tag in your base html. (example)
like image 187
Adelin Avatar answered Nov 08 '22 00:11

Adelin


Actually no one asked for the template. Based on this https://docs.djangoproject.com/en/2.0/topics/forms/media/ it was the form.media that did the trick. I didnt use my own form name for the .media call.

Here is my html template file that had the field to display the map.

{% extends 'employee/base.html' %}
{% load bootstrap3 %}

{% block page %}
  <div class="col-lg-12">
    <div class="panel">
      <div class="panel-heading bg-blue">
        <h4 class="panel-title text-center text-white">
          Company Settings
        </h4>
      </div>
        <div class="panel-body">         
          {{ companysetting_form.media }} <--- this did the trick
          <h4>Company Login Name: <a href="{% url 'employee-companychangename' %}">{{ request.user.employee.company.companyname }}</a></h4> 
          <form method="POST" enctype="multipart/form-data">
            {% csrf_token %}            
            {% bootstrap_form companysetting_form %}
            <button type="submit" class="btn btn-pink">Update</button>
          </form>

        </div>
      </div>
    </div>
{% endblock %}
like image 45
Axil Avatar answered Nov 08 '22 01:11

Axil