{{"decoupled-map"|googlemap_js(37.4419, -122.1419, varname="decoupledmap", markers=[(37.4419, -122.1419)])}} {{mymap.js}} {{sndmap.js}} {{trdmap.js}} {{clustermap.js}} {{movingmap.js}} {{rectmap.js}} {{circlemap.js}} {{plinemap.js}} {{pgonmap.js}} {{collapsible.js}} {{infoboxmap.js}}

Flask Google Maps Example

Template function centered, no marker

{{googlemap("simple-map", 37.4419, -122.1419, varname="simplemap")}}


            {% 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, varname="nocontrolsmap", 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, varname="anothermap", 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 %}

Clustered map in view

Cluster markes by proximity


            {% raw %}

View:
from flask_googlemaps import Map

@app.route("/")
def mapview():
    mymap = Map(
        identifier="cluster-map",
        lat=37.4419,
        lng=-122.1419,
        markers=[{'lat': 37.4419, 'lng': -122.1419}, {'lat': 37.4500, 'lng': -122.1419}, {'lat': 36.4419, 'lng': -120.1419}]
        cluster=True,
        cluster_gridsize=10
    )
    return render_template('clustermap.html', clustermap=clustermap)

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

{% endraw %}

Moving Map

You can move markers dynamically and add new markers, refresh its position etc...

{{movingmap.html}} {% for position in movingmarkers %} {% endfor %}

<button onclick='movingmap_markers.map(function(mk){mk.setPosition({lat: 37.44, lng:-122.135})})'>Go to position 1 </button>
<button onclick='movingmap_markers.map(function(mk){mk.setPosition({lat: 37.443, lng:-122.135})})'>Go to position 2 </button>
<button onclick='movingmap_markers.map(function(mk){mk.setPosition({lat: 37.445, lng:-122.135})})'>Go to position 3 </button>
<button onclick='movingmap_markers.map(function(mk){mk.setPosition({lat: 37.449, lng:-122.135})})'>Go to position 4 </button>
<button onclick='movingmap_markers.map(function(mk){mk.setMap(null)})'>Remove marker</button>
<button onclick='movingmap_markers.map(function(mk){mk.setMap(movingmap)})'>Restore marker</button>
<button onclick='onclick='new google.maps.Marker({title: "New Marker", position: {lat: 37.4640, lng: -122.1350}}).setMap(movingmap)''>Add new marker above</button>

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': icons.alpha.B,
                'lat':  37.4419,
                'lng':  -122.1419,
                'infobox': "Hello I am < b style='color:green;'>B< / 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 %}

Map with rectangle example

Map with circle example

Map with polyline example

Map with polygons examples

Collapsible map example


            {% raw %}

View:
from flask_googlemaps import Map, icons

@app.route("/")
def mapview():
    collapsible = Map(
        identifier="collapsible",
        varname="collapsible",
        lat=60.000025,
        lng=30.288809,
        zoom = 13,
        collapsible = True
    )
    return render_template('example.html', collapsible=collapsible)

Template:
in head:
    {{collapsible.js}}
in body:
    <button id="collapsible_collapse">Show map</button>
    {{collapsible.html}}

{% endraw %}