{{"decoupled-map"|googlemap_js(37.4419, -122.1419, markers=[(37.4419, -122.1419)])}} {{mymap.js}} {{sndmap.js}}

Flask Google Maps Example

Template function centered, no marker


            {% raw %}
{{googlemap("simple-map", 37.4419, -122.1419)}}
{% endraw %}

Template filter decoupled with single marker


            {% raw %}
on the head:
    {{"decoupled-map"|googlemap_js(37.4419, -122.1419, markers=[(37.4419, -122.1419)])}}
on the body:
    {{"decoupled-map"|googlemap_html(37.4419, -122.1419)}}
{% endraw %}

Template function with multiple markers

{% with map=googlemap_obj("another-map", 37.4419, -122.1419, markers=[(37.4419, -122.1419), (37.4300, -122.1400)]) %} {{map.html}} {{map.js}} {% endwith %}


            {% raw %}
{% with map=googlemap_obj("another-map", 37.4419, -122.1419, markers=[(37.4419, -122.1419), (37.4300, -122.1400)]) %}
    {{map.html}}
    {{map.js}}
{% endwith %}
{% endraw %}

First map generated in view


            {% raw %}

View:
from flaskext.googlemaps import Map

@app.route("/")
def mapview():
    mymap = Map(
        identifier="view-side",
        lat=37.4419,
        lng=-122.1419,
        markers=[(37.4419, -122.1419)]
    )
    return render_template('example.html', mymap=mymap)

Template:
in head:
    {{mymap.js}}
in body:
    {{mymap.html}}

{% endraw %}

Second map generated in view

Example for different icons in multiple markers


            {% raw %}

View:
from flaskext.googlemaps import Map

@app.route("/")
def mapview():
    sndmap = Map(
        identifier="sndmap",
        lat=37.4419,
        lng=-122.1419,
        markers={'http://maps.google.com/mapfiles/ms/icons/green-dot.png':[(37.4419, -122.1419)],
                 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png':[(37.4300, -122.1400)]}
    )
    return render_template('example.html', sndmap=sndmap)

Template:
in head:
    {{sndmap.js}}
in body:
    {{sndmap.html}}

{% endraw %}