flask-googlemaps

FlaskGoogleMaps - Google Maps Extension for Flask

These details have not been verified by PyPI

Project links

Homepage

Project description

Easy to use Google Maps in your Flask application

Look the Live DEMO: http://flaskgooglemaps.pythonanywhere.com

requires

Jinja
Flask
A google api key get here

Installation

pip install flask-googlemaps

git clone https://github.com/rochacbruno/Flask-GoogleMaps
cd Flask-GoogleMaps
python setup.py install

How it works

Flask-GoogleMaps includes some global functions and template filters in your Jinja environment, also it allows you to use the Map in views if needed.

registering

in your app

from flask import Flask
from flask_googlemaps import GoogleMaps

app = Flask(__name__)

# you can set key as config
app.config['GOOGLEMAPS_KEY'] = "8JZ7i18MjFuM35dJHq70n3Hx4"

# Initialize the extension
GoogleMaps(app)

# you can also pass the key here if you prefer
GoogleMaps(app, key="8JZ7i18MjFuM35dJHq70n3Hx4")

In template

{{googlemap("my_awesome_map", lat=0.23234234, lng=-0.234234234, markers=[(0.12, -0.45345), ...])}}

That’s it! now you have some template filters and functions to use, more details in examples and screenshot below.

Usage

You can create the map in the view and then send to the template context
you can use the template functions and filters directly

1. View

from flask import Flask, render_template
from flask_googlemaps import GoogleMaps
from flask_googlemaps import Map

app = Flask(__name__, template_folder=".")
GoogleMaps(app)

@app.route("/")
def mapview():
    # creating a map in the view
    mymap = Map(
        identifier="view-side",
        lat=37.4419,
        lng=-122.1419,
        markers=[(37.4419, -122.1419)]
    )
    sndmap = Map(
        identifier="sndmap",
        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': "<b>Hello World</b>"
          },
          {
             'icon': 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png',
             'lat': 37.4300,
             'lng': -122.1400,
             'infobox': "<b>Hello World from other place</b>"
          }
        ]
    )
    return render_template('example.html', mymap=mymap, sndmap=sndmap)

if __name__ == "__main__":
    app.run(debug=True)

Map() Parameters

lat: The latitude coordinate for centering the map.
lng: The longitutde coordinate for centering the map.
zoom: The zoom level. Defaults to 13.
maptype: The map type - ROADMAP, SATELLITE, HYBRID, TERRAIN. Defaults to ROADMAP.
markers: Markers array of tuples having (lat, lng, infobox, icon). Defaults to None.
or markers: a list of dicts containing icon, lat, lng, infobox.
or markers: Markers dictionary with icon urls as keys and markers array as values.
varname: The instance variable name.
style: A string containing CSS styles. Defaults to "height:300px;width:300px;margin:0;".
identifier: The CSS ID selector name.
cls: The CSS Class selector name. Defaults to "map".
language: The map language. Defaults to "en".
region: The map region. Defaults to "US".

Also controls True or False:

zoom_control
maptype_control
scale_control
scale_control
streetview_control
rorate_control
fullscreen_control
scroll_wheel
collapsible (map collapses by click on varname_collapse button)

2. Template

<!DOCTYPE html>
    <html>
    <head>
            {{"decoupled-map"|googlemap_js(37.4419, -122.1419, markers=[(37.4419, -122.1419)])}}
            {{mymap.js}}
            {{sndmap.js}}
    </head>
    <body>
        <h1>Flask Google Maps Example</h1>

        <h2> Template function centered, no marker </h2>
        {{googlemap("simple-map", 37.4419, -122.1419)}}

        <h2> Template filter decoupled with single marker </h2>
        {{"decoupled-map"|googlemap_html(37.4419, -122.1419)}}

        <h2> Template function with multiple markers </h2>
        {% with map=googlemap_obj("another-map", 37.4419, -122.1419, markers=[(37.4419, -122.1419), (37.4300, -122.1400)]) %}
            {{map.html}}
            {{map.js}}
        {% endwith %}

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

        <h2> Second map generated in view</h2>
        <h3> Example for different icons in multiple markers with infoboxes</h3>
        {{sndmap.html}}

    </body>
</html>

Infobox

Here’s an example snippet of code:

Map(
    identifier="catsmap",
    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': "<img src='cat1.jpg' />"
        },
        {
            'icon': 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png',
            'lat': 37.4300,
            'lng': -122.1400,
            'infobox': "<img src='cat2.jpg' />"
        },
        {
            'icon': 'http://maps.google.com/mapfiles/ms/icons/yellow-dot.png',
            'lat': 37.4500,
            'lng': -122.1350,
            'infobox': "<img src='cat3.jpg' />"
        }
    ]
)

Which results in something like the following map:

Fit all markers within bounds

Allow users to easily fit all markers within view on page load

Without bounds

@app.route('/map-unbounded/')
def map_unbounded():
"""Create map with markers out of bounds."""
    locations = []    # long list of coordinates
    map = Map(
        lat=locations[0].latitude,
        lng=locations[0].longitude,
        markers=[(loc.latitude, loc.longitude) for loc in locations]
    )
    return render_template('map.html', map=map)

With bounds

@app.route('/map-bounded/')
def map_bounded():
"""Create map with all markers within bounds."""
    locations = []    # long list of coordinates
    map = Map(
        lat=locations[0].latitude,
        lng=locations[0].longitude,
        markers=[(loc.latitude, loc.longitude) for loc in locations],
        fit_markers_to_bounds = True
    )
    return render_template('map.html', map=map)

Run the example app

$ git clone https://github.com/rochacbruno/Flask-GoogleMaps
$ cd Flask-GoogleMaps/examples
$ python setup.py develop
$ python example.py
running..

Access: http://localhost:5000/ and http://localhost:5000/fullmap

TODO (open a Pull Request)

Implement other methods from the api, add layers etc…

Please see this page developers.google.com/maps/documentation/javascript/tutorial and contribute!

Project details

These details have not been verified by PyPI

Project links

Homepage

Release history Release notifications | RSS feed

0.4.1

Dec 25, 2020

0.4.0

Feb 22, 2020

0.3.0

Feb 21, 2020

0.2.6

Apr 17, 2018

This version

0.2.5

Aug 31, 2017

0.2.4

Oct 7, 2016

0.2.3

Oct 7, 2016

0.2.2

Jul 19, 2016

0.2.1

Jul 18, 2016

0.2.0

Jun 29, 2016

0.1.9

Dec 18, 2015

0.1.8

Jul 29, 2015

0.1.6

Jul 1, 2015

0.1.5

Nov 22, 2013

0.1.4

Nov 22, 2013

0.1.3

Nov 22, 2013

0.1.0

Nov 21, 2013

Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

Flask-GoogleMaps-0.2.5.tar.gz (1.7 MB view details)

Uploaded Aug 31, 2017 Source

Built Distribution

Flask_GoogleMaps-0.2.5-py2.py3-none-any.whl (45.2 kB view details)

Uploaded Aug 31, 2017 Python 2 Python 3

File details

Details for the file Flask-GoogleMaps-0.2.5.tar.gz.

File metadata

Download URL: Flask-GoogleMaps-0.2.5.tar.gz
Upload date: Aug 31, 2017
Size: 1.7 MB
Tags: Source
Uploaded using Trusted Publishing? No

File hashes

Hashes for Flask-GoogleMaps-0.2.5.tar.gz
Algorithm	Hash digest
SHA256	`551a76a86e86a0da6666cd6950bc3d1816ab6a0507251f18935ca65ab0310122`
MD5	`ab2086955e5a57f060261832e775cca9`
BLAKE2b-256	`2b6a0070737a283ca2e0f9c2b020b88a198c0145e17d5f22441909f37bba9763`

See more details on using hashes here.

File details

Details for the file Flask_GoogleMaps-0.2.5-py2.py3-none-any.whl.

File metadata

Download URL: Flask_GoogleMaps-0.2.5-py2.py3-none-any.whl
Upload date: Aug 31, 2017
Size: 45.2 kB
Tags: Python 2, Python 3
Uploaded using Trusted Publishing? No

File hashes

Hashes for Flask_GoogleMaps-0.2.5-py2.py3-none-any.whl
Algorithm	Hash digest
SHA256	`88a00175b4df3d7fc021929c6160c27de8351345ce739fe76667d1dead2c1c4b`
MD5	`45178a671fe6d794e77af8eaa4e85f2c`
BLAKE2b-256	`611137ad72b7fbde6705c542bea3939277c7618c88fd27edd3310aa11aac7c10`