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 ?
This was encountered before. The possible solutions:
python manage.py collectstatic
so that the third-party static files are copied to STATIC_ROOT
(more in their readme)urls
(Helper link #1 and #2){{form.media}}
somewhere in <head>
or at the end of your <body>
tag in your base html. (example)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 %}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With