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
@@ -30,6 +29,7 @@ poetry shell # activate virtualenv
3029poetry install # to install all for dev
3130pre-commit install # to install pre-commit hooks
3231```
32+
3333## Installation
3434
3535To use in your project just use your dependency manager to install it, with pip is like this:
@@ -42,7 +42,6 @@ pip install flask-googlemaps
4242
4343Flask-GoogleMaps includes some global functions and template filters in your Jinja environment, also it allows you to use the Map in views if needed.
4444
45-
4645### registering
4746
4847in your app
@@ -68,21 +67,17 @@ GoogleMaps(app, key="8JZ7i18MjFuM35dJHq70n3Hx4")
6867In template
6968
7069``` html
71-
72- {{googlemap("my_awesome_map", lat=0.23234234, lng=-0.234234234, markers=[(0.12, -0.45345), ...])}}
73-
70+ {{googlemap("my_awesome_map", lat=0.23234234, lng=-0.234234234, markers=[(0.12,
71+ -0.45345), ...])}}
7472```
7573
7674That's it! now you have some template filters and functions to use, more details in examples and screenshot below.
7775
78-
79-
8076### Usage
8177
8278- You can create the map in the view and then send to the template context
8379- you can use the template functions and filters directly
8480
85-
8681#### 1. View
8782
8883``` python
@@ -132,11 +127,11 @@ if __name__ == "__main__":
132127##### ` Map() ` Parameters
133128
134129- ** lat** : The latitude coordinate for centering the map.
135- - ** lng** : The longitutde coordinate for centering the map.
130+ - ** lng** : The longitude coordinate for centering the map.
136131- ** zoom** : The zoom level. Defaults to ` 13 ` .
137132- ** maptype** : The map type - ` ROADMAP ` , ` SATELLITE ` , ` HYBRID ` , ` TERRAIN ` . Defaults to ` ROADMAP ` .
138- - ** markers** : Markers array of tuples having (** lat** , ** lng** , infobox, icon). Defaults to ` None ` .
139- - or ** markers** : a list of dicts containing ** icon, lat, lng, infobox** .
133+ - ** markers** : Markers array of tuples having (** lat** , ** lng** , infobox, icon, label ). Defaults to ` None ` .
134+ - or ** markers** : a list of dicts containing ** lat** , ** lng** , infobox, icon, label .
140135- or ** markers** : Markers dictionary with icon urls as keys and markers array as values.
141136- ** varname** : The instance variable name.
142137- ** style** : A string containing CSS styles. Defaults to ` "height:300px;width:300px;margin:0;" ` .
@@ -155,50 +150,47 @@ Also controls True or False:
155150- rotate_control
156151- fullscreen_control
157152- scroll_wheel
158- - collapsible (map collapses by click on ** varname** _ collapse button)
153+ - collapsible (map collapses by click on ** varname** \_ collapse button)
154+ - mapdisplay (show a collapsible map by default or not)
159155- center_on_user_location (using HTML5 Geolocation)
160156
161157#### 2. Template
162158
163159``` html
164-
165160<!DOCTYPE html>
166- <html >
167- <head >
168- {{"decoupled-map"|googlemap_js(37.4419, -122.1419, markers=[(37.4419, -122.1419)])}}
169- {{mymap.js}}
170- {{sndmap.js}}
171- </head >
172- <body >
173- <h1 >Flask Google Maps Example</h1 >
174-
175- <h2 > Template function centered, no marker </h2 >
176- {{googlemap("simple-map", 37.4419, -122.1419)}}
177-
178- <h2 > Template filter decoupled with single marker </h2 >
179- {{"decoupled-map"|googlemap_html(37.4419, -122.1419)}}
180-
181- <h2 > Template function with multiple markers </h2 >
182- {% with map=googlemap_obj("another-map", 37.4419, -122.1419, markers=[(37.4419, -122.1419), (37.4300, -122.1400)]) %}
183- {{map.html}}
184- {{map.js}}
185- {% endwith %}
186-
187- <h2 > First map generated in view</h2 >
188- {{mymap.html}}
189-
190- <h2 > Second map generated in view</h2 >
191- <h3 > Example for different icons in multiple markers with infoboxes</h3 >
192- {{sndmap.html}}
193-
194- </body >
161+ <html >
162+ <head >
163+ {{"decoupled-map"|googlemap_js(37.4419, -122.1419, markers=[(37.4419,
164+ -122.1419)])}} {{mymap.js}} {{sndmap.js}}
165+ </head >
166+ <body >
167+ <h1 >Flask Google Maps Example</h1 >
168+
169+ <h2 >Template function centered, no marker</h2 >
170+ {{googlemap("simple-map", 37.4419, -122.1419)}}
171+
172+ <h2 >Template filter decoupled with single marker</h2 >
173+ {{"decoupled-map"|googlemap_html(37.4419, -122.1419)}}
174+
175+ <h2 >Template function with multiple markers</h2 >
176+ {% with map=googlemap_obj("another-map", 37.4419, -122.1419,
177+ markers=[(37.4419, -122.1419), (37.4300, -122.1400)]) %} {{map.html}}
178+ {{map.js}} {% endwith %}
179+
180+ <h2 >First map generated in view</h2 >
181+ {{mymap.html}}
182+
183+ <h2 >Second map generated in view</h2 >
184+ <h3 >Example for different icons in multiple markers with infoboxes</h3 >
185+ {{sndmap.html}}
186+ </body >
195187</html >
196-
197188```
198189
199190### Infobox
200191
201192Here's an example snippet of code:
193+
202194``` python
203195
204196 Map(
@@ -232,6 +224,39 @@ Here's an example snippet of code:
232224Which results in something like the following map:
233225<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 " >
234226
227+ ### Label
228+
229+ Here's an example snippet of code:
230+ ``` python
231+
232+ Map(
233+ identifier = " labelsmap" ,
234+ lat = 37.4419 ,
235+ lng = - 122.1419 ,
236+ markers = [
237+ {
238+ ' lat' : 37.4500 ,
239+ ' lng' : - 122.1350 ,
240+ ' label' : " X"
241+ },
242+ {
243+ ' lat' : 37.4419 ,
244+ ' lng' : - 122.1419 ,
245+ ' label' : " Y"
246+ },
247+ {
248+ ' lat' : 37.4300 ,
249+ ' lng' : - 122.1400 ,
250+ ' label' : " Z"
251+ }
252+ ]
253+ )
254+
255+ ```
256+
257+ Which results in something like the following map:
258+
259+ <img width =" 271 " alt =" Map showing markers with labels " src =" https://user-images.githubusercontent.com/708882/92332217-a3363280-f041-11ea-975c-0ac9413ada68.png " >
235260
236261### Fit all markers within bounds
237262
@@ -276,8 +301,7 @@ def map_bounded():
276301
277302![ image] ( https://user-images.githubusercontent.com/14223309/29294483-6ac3e532-8104-11e7-988c-5c19d700fe5b.png )
278303
279-
280- ### Geocoding and Reverse Geocoding
304+ ### Geocoding and Reverse Geocoding
281305
282306``` python
283307from flask_googlemaps import get_address, get_coordinates
@@ -293,7 +317,6 @@ print(get_coordinates(API_KEY,'Netaji Subhash Engineering College Kolkata'))
293317# output: {'lat': 22.4761596, 'lng': 88.4149326}
294318```
295319
296-
297320### Run the example app
298321
299322``` bash
0 commit comments