examples/templates/example.html

<!DOCTYPE html>
    <html>
    <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <title>Flask Google Maps Example</title>
            {{"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}}
            {{clickmap.js}}

    </head>
    <body>
        <h1>Flask Google Maps Example</h1>

        Provide your Google Maps API Key to test it.
        Get you APIKEY in <a href="https://console.developers.google.com/">https://console.developers.google.com/</a><br>
        NOTE: You need to create an APIKEY and also activate Maps Javascript API for it.
        <form action="." method="GET">
            <input type="text" name="apikey" id="apikey"/><input type="submit" value="load"/>
        </form>
        <hr>

        <h2> Template function centered, no marker </h2>
        {{googlemap("simple-map", 37.4419, -122.1419, varname="simplemap")}}
        <code>
            <pre>
{% raw %}
{{googlemap("simple-map", 37.4419, -122.1419)}}
{% endraw %}
            </pre>
        </code>


        <h1>Disabling controls</h1>

        <h2> Template function centered, no marker, no controls </h2>
        {{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)}}
        <code>
            <pre>
{% 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 %}
            </pre>
        </code>


        <h2> Template filter decoupled with single marker </h2>
        {{"decoupled-map"|googlemap_html(37.4419, -122.1419)}}
        <code>
            <pre>
{% 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 %}
            </pre>
        </code>


        <h2> Template function with multiple markers </h2>
        {% 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 %}

        <code>
            <pre>
{% 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 %}
            </pre>
        </code>

                <h1> Clustered map in view</h1>
                 <h2>Cluster markes by proximity</h2>

        {{clustermap.html}}

        <code>
            <pre>
{% 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 %}
            </pre>
        </code>


<h1> Moving Map</h1>
<h2>You can move markers dynamically and add new markers, refresh its position etc... </h2>
{{movingmap.html}}

{%  for position in movingmarkers %}
<button onclick='movingmap_markers.map(function(mk){mk.setPosition({lat: {{ position.lat }}, lng:{{ position.lng }}})})'>Go to position {{ loop.index }} </button>
{% endfor %}
<br />
<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='new google.maps.Marker({title: "New Marker", position: {lat: 37.4640, lng: -122.1350}}).setMap(movingmap)'>Add New Marker Above</button>


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


        <h2> First map generated in view</h2>
        {{mymap.html}}

        <code>
            <pre>
{% 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 %}
            </pre>
        </code>

        <h2> Second map generated in view</h2>
        <h3> Example for different icons in multiple markers</h3>
        <h4>The blue point is clickable!</h4>
        {{sndmap.html}}

        <code>
            <pre>
{% 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 %}
            </pre>
        </code>


        <h2> 3rd map generated in view</h2>
        <h3> Example for multiple markers with infoboxes</h3>
        <h4>Click in markers to see it in action!</h4>
        <h4>Click in the YELLOW marker to see HTML rendered</h4>
        {{trdmap.html}}

        <code>
            <pre>
{% 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 %}
            </pre>
        </code>

        <h2>Map with rectangle example</h2>

        {{ rectmap.html }}

        <h2>Map with circle example</h2>

        {{ circlemap.html }}

        <h2>Map with polyline example</h2>

        {{ plinemap.html }}


        <h2>Map with polygons examples</h2>

        {{ pgonmap.html }}

        <h2 style="display:inline-block;">Collapsible map example</h2>

        <button id="collapsible_collapse">Show map</button>
        {{ collapsible.html }}

                <code>
            <pre>
{% 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:
    &lt;button id="collapsible_collapse"&gt;Show map&lt;/button&gt;
    {{collapsible.html}}

{% endraw %}
            </pre>
        </code>

        <h2>Infoboxes for map shapes</h2>
        {{infoboxmap.html}}

        <h2>LatLon from click to flask and back:</h2>

        {{clickmap.html}}

    </body>
</html>