I want to test the Google Maps Static API with Django 1.3 (using Python 2.7). For this purpose, I have created a simple form for querying the coordinates (latitude & longitude), the zoom level, and the map size. The form looks like this:
from django import forms
class GoogleMapsStaticApiForm(forms.Form):
latitude = forms.FloatField(required=True, min_value=-90.0, max_value=90.0)
longitude = forms.FloatField(required=True, min_value=-180.0,max_value=180.0)
zoom_level = forms.IntegerField(required=True, min_value=0, max_value=21)
map_width = forms.IntegerField(required=True, min_value=0, max_value=640)
map_height = forms.IntegerField(required=True, min_value=0, max_value=640)
In the respective view, I want to build the URL from the information given in the form and return the URL to a template which should render the map in the same template.
The view:
def map_properties(request):
map_url = 'http://maps.google.com/maps/api/staticmap?'
if request.method == 'POST':
form = GoogleMapsStaticApiForm(request.POST)
if form.is_valid():
center = 'center={0},{1}'.format(form.latitude, form.longitude)
zoom = 'zoom={0}'.format(form.zoom_level)
size = 'size={0}x{1}'.format(form.map_width, form.map_height)
url_suffix = '&'.join((center, zoom, size, 'sensor=false'))
map_url = ''.join((map_url, url_suffix))
else:
form = GoogleMapsStaticApiForm()
return render_to_response('frontend/frontend.html',
{'form':form, 'map_url':map_url},
context_instance=RequestContext(request))
The template:
<html>
<head>
<title>Google Maps Static API - Demo</title>
</head>
<body>
<form method="post" accept-charset="UTF-8">
{% csrf_token %}
{% for field in form %}
<input type="text" placeholder={{ field.html_name }}>
{% endfor %}
<button type="submit">Show the fancy map!</button>
</form>
{% if form.is_valid %}
<p><img src="{{ map_url }}" alt="Google Maps Static Map"></p>
{% else %}
<p>Form is not valid</p>
{% endif %}
</body>
</html>
When I try to validate the form with example data in the Django console, it works fine:
>>> from frontend.forms import GoogleMapsStaticApiForm
>>> data = {'latitude':51.477222, 'longitude':0.0, 'zoom_level':12, 'map_width':400, 'map_height':400}
>>> f = GoogleMapsStaticApiForm(data)
>>> f.is_valid()
True
But when I enter the same data in the browser and press the submit button, the same template is reloaded but without the generated map. The form never seems to validate. Can anyone please tell me why this is the case? Thank you very much!
It looks like the form is empty because the input tag does not contain any name nor value attribute:
For the browser to send any data, the input tag should have a name attribute:
For an input to show any value, the input should have a value attribute. To get the value of a field you’d do
form.data['field_name'], but we can’t do that in the template. So we create a template filter. If you don’t know how to do that, refer to the documentation. Here’s a quick howto:Create a templatetags subdir in your app
Create an empty
__init__.pyin that directoryCreate a file “yourapp_tags.py” in that directory
Here’s an example of the code you could put in that script:
Then you can use it in the template to set the initial field value:
Don’t forget to
{% load yourapp_tags %}in your template or get_field_value won’t be recognized !