{{"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}}
{% raw %}
{{googlemap("simple-map", 37.4419, -122.1419)}}
{% endraw %}
{% 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 %}
{% 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 %}
{% 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 %}
{% 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 %}
<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>
{% 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 %}
{% 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 %}
{% 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 %}
{% 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 %}