11# Flask Google Maps [ ![ Generic badge] ( https://img.shields.io/badge/PayPal-Donante-red.svg )] ( https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=2UGZHBYZV39XY&source=url )
22
3-
43[ ![ Flask Estension] ( https://img.shields.io/badge/flask-extension-green.svg?style=flat )] ( https://flaskextensions.com )
54[ ![ PyPI version fury.io] ( https://badge.fury.io/py/flask-googlemaps.svg )] ( https://pypi.python.org/pypi/flask-googlemaps/ )
65[ ![ PyPI download month] ( https://img.shields.io/pypi/dm/flask-googlemaps.svg )] ( https://pypi.org/project/flask-googlemaps/ )
76[ ![ PyPI license] ( https://img.shields.io/pypi/l/flask-googlemaps.svg )] ( https://pypi.python.org/pypi/flask-googlemaps/ )
87[ ![ PyPI format] ( https://img.shields.io/pypi/format/flask-googlemaps.svg )] ( https://pypi.python.org/pypi/flask-googlemaps/ )
98[ ![ PyPI status] ( https://img.shields.io/pypi/status/flask-googlemaps.svg )] ( https://pypi.python.org/pypi/flask-googlemaps/ )
10- [ ![ PyPI pyversions ] ( https://img.shields.io/pypi/pyversions/ flask-googlemaps .svg )] ( https://pypi.python.org/pypi/ flask-googlemaps/ )
9+ [ ![ CI-Github ] ( https://github.com/ flask-extensions/Flask-GoogleMaps/workflows/CI/badge .svg )] ( https://github.com/ flask-extensions/Flask-GoogleMaps/workflows/CI/badge.svg )
1110[ ![ Code style: black] ( https://img.shields.io/badge/code%20style-black-000000.svg )] ( https://github.com/psf/black )
1211
1312Easy to use Google Maps in your Flask application
@@ -29,6 +28,7 @@ poetry use env 3.8 # just to create virtualenv at the first time
2928poetry shell # activate virtualenv
3029poetry install # to install all for dev
3130```
31+
3232## Installation
3333
3434To use in your project just use your dependency manager to install it, with pip is like this:
@@ -41,7 +41,6 @@ pip install flask-googlemaps
4141
4242Flask-GoogleMaps includes some global functions and template filters in your Jinja environment, also it allows you to use the Map in views if needed.
4343
44-
4544### registering
4645
4746in your app
@@ -67,21 +66,17 @@ GoogleMaps(app, key="8JZ7i18MjFuM35dJHq70n3Hx4")
6766In template
6867
6968``` html
70-
71- {{googlemap("my_awesome_map", lat=0.23234234, lng=-0.234234234, markers=[(0.12, -0.45345), ...])}}
72-
69+ {{googlemap("my_awesome_map", lat=0.23234234, lng=-0.234234234, markers=[(0.12,
70+ -0.45345), ...])}}
7371```
7472
7573That's it! now you have some template filters and functions to use, more details in examples and screenshot below.
7674
77-
78-
7975### Usage
8076
8177- You can create the map in the view and then send to the template context
8278- you can use the template functions and filters directly
8379
84-
8580#### 1. View
8681
8782``` python
@@ -154,50 +149,46 @@ Also controls True or False:
154149- rotate_control
155150- fullscreen_control
156151- scroll_wheel
157- - collapsible (map collapses by click on ** varname** _ collapse button)
152+ - collapsible (map collapses by click on ** varname** \ _ collapse button)
158153- center_on_user_location (using HTML5 Geolocation)
159154
160155#### 2. Template
161156
162157``` html
163-
164158<!DOCTYPE html>
165- <html >
166- <head >
167- {{"decoupled-map"|googlemap_js(37.4419, -122.1419, markers=[(37.4419, -122.1419)])}}
168- {{mymap.js}}
169- {{sndmap.js}}
170- </head >
171- <body >
172- <h1 >Flask Google Maps Example</h1 >
173-
174- <h2 > Template function centered, no marker </h2 >
175- {{googlemap("simple-map", 37.4419, -122.1419)}}
176-
177- <h2 > Template filter decoupled with single marker </h2 >
178- {{"decoupled-map"|googlemap_html(37.4419, -122.1419)}}
179-
180- <h2 > Template function with multiple markers </h2 >
181- {% with map=googlemap_obj("another-map", 37.4419, -122.1419, markers=[(37.4419, -122.1419), (37.4300, -122.1400)]) %}
182- {{map.html}}
183- {{map.js}}
184- {% endwith %}
185-
186- <h2 > First map generated in view</h2 >
187- {{mymap.html}}
188-
189- <h2 > Second map generated in view</h2 >
190- <h3 > Example for different icons in multiple markers with infoboxes</h3 >
191- {{sndmap.html}}
192-
193- </body >
159+ <html >
160+ <head >
161+ {{"decoupled-map"|googlemap_js(37.4419, -122.1419, markers=[(37.4419,
162+ -122.1419)])}} {{mymap.js}} {{sndmap.js}}
163+ </head >
164+ <body >
165+ <h1 >Flask Google Maps Example</h1 >
166+
167+ <h2 >Template function centered, no marker</h2 >
168+ {{googlemap("simple-map", 37.4419, -122.1419)}}
169+
170+ <h2 >Template filter decoupled with single marker</h2 >
171+ {{"decoupled-map"|googlemap_html(37.4419, -122.1419)}}
172+
173+ <h2 >Template function with multiple markers</h2 >
174+ {% with map=googlemap_obj("another-map", 37.4419, -122.1419,
175+ markers=[(37.4419, -122.1419), (37.4300, -122.1400)]) %} {{map.html}}
176+ {{map.js}} {% endwith %}
177+
178+ <h2 >First map generated in view</h2 >
179+ {{mymap.html}}
180+
181+ <h2 >Second map generated in view</h2 >
182+ <h3 >Example for different icons in multiple markers with infoboxes</h3 >
183+ {{sndmap.html}}
184+ </body >
194185</html >
195-
196186```
197187
198188### Infobox
199189
200190Here's an example snippet of code:
191+
201192``` python
202193
203194 Map(
@@ -231,7 +222,6 @@ Here's an example snippet of code:
231222Which results in something like the following map:
232223<img width =" 1439 " alt =" screen shot 2015-07-29 at 2 41 52 pm " src =" https://cloud.githubusercontent.com/assets/8108300/8969650/13b0de7a-3602-11e5-9ed0-9f328ac9253f.png " >
233224
234-
235225### Fit all markers within bounds
236226
237227Allow users to easily fit all markers within view on page load
@@ -275,8 +265,7 @@ def map_bounded():
275265
276266![ image] ( https://user-images.githubusercontent.com/14223309/29294483-6ac3e532-8104-11e7-988c-5c19d700fe5b.png )
277267
278-
279- ### Geocoding and Reverse Geocoding
268+ ### Geocoding and Reverse Geocoding
280269
281270``` python
282271from flask_googlemaps import get_address, get_coordinates
@@ -292,7 +281,6 @@ print(get_coordinates(API_KEY,'Netaji Subhash Engineering College Kolkata'))
292281# output: {'lat': 22.4761596, 'lng': 88.4149326}
293282```
294283
295-
296284### Run the example app
297285
298286``` bash
0 commit comments