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

Flask Google Maps Example

Template function centered, no marker


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

Disabling controls

Template function centered, no marker, no controls

{{googlemap("no-controls-map", 37.4419, -122.1419, zoom_control=False, maptype_control=False, scale_control=False, streetview_control=False, rotate_control=False, fullscreen_control=False)}}


            {% raw %}
{{
    googlemap(
        identifier="no-controls-map",
        lat=37.4419,
        lng=-122.1419,
        zoom_control=False,
        maptype_control=False,
        scale_control=False,
        streetview_control=False,
        rotate_control=False,
        fullscreen_control=False
    )
}}
{% 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, "Hello!")]) %} {{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, "Hello")]) %}
    {{map.html}}
    {{map.js}}
{% endwith %}
{% endraw %}

First map generated in view


            {% raw %}

View:
from flask_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

The blue point is clickable!


            {% raw %}

View:
from flask_googlemaps import Map, icons

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

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

{% endraw %}

3rd map generated in view

Example for multiple markers with infoboxes

Click in markers to see it in action!

Click in the YELLOW marker to see HTML rendered


            {% raw %}

View:
from flask_googlemaps import Map, icons

@app.route("/")
def mapview():
    trdmap = Map(
        identifier="trdmap",
        lat=37.4419,
        lng=-122.1419,
        markers=[
            {
                'icon': 'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
                'lat':  37.4419,
                'lng':  -122.1419,
                'infobox': "Hello I am < b style='color:green;'>GREEN< / b >!"
            },
            {
                'icon': icons.dots.blue,
                'lat': 37.4300,
                'lng': -122.1400,
                'infobox': "Hello I am < b style='color:blue;'>BLUE< / b >!"
            },
            {
                'icon': icons.dots.yellow,
                'lat': 37.4500,
                'lng': -122.1350,
                'infobox': (
                    "Hello I am < b style='color:#ffcc00;'> YELLOW < / b >!"
                    "< h2 >It is HTML title< / h2 >"
                    "< img src=' //placehold.it/50' >"
                    "< br >Images allowed!"
                )
            }
        ]
    )
    return render_template('example.html', trdmap=trdmap)

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

{% endraw %}