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
@@ -131,11 +126,11 @@ if __name__ == "__main__":
131126##### ` Map() ` Parameters
132127
133128- ** lat** : The latitude coordinate for centering the map.
134- - ** lng** : The longitutde coordinate for centering the map.
129+ - ** lng** : The longitude coordinate for centering the map.
135130- ** zoom** : The zoom level. Defaults to ` 13 ` .
136131- ** maptype** : The map type - ` ROADMAP ` , ` SATELLITE ` , ` HYBRID ` , ` TERRAIN ` . Defaults to ` ROADMAP ` .
137- - ** markers** : Markers array of tuples having (** lat** , ** lng** , infobox, icon). Defaults to ` None ` .
138- - or ** markers** : a list of dicts containing ** icon, lat, lng, infobox** .
132+ - ** markers** : Markers array of tuples having (** lat** , ** lng** , infobox, icon, label ). Defaults to ` None ` .
133+ - or ** markers** : a list of dicts containing ** lat** , ** lng** , infobox, icon, label .
139134- or ** markers** : Markers dictionary with icon urls as keys and markers array as values.
140135- ** varname** : The instance variable name.
141136- ** style** : A string containing CSS styles. Defaults to ` "height:300px;width:300px;margin:0;" ` .
@@ -154,50 +149,47 @@ 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)
153+ - mapdisplay (show a collapsible map by default or not)
158154- center_on_user_location (using HTML5 Geolocation)
159155
160156#### 2. Template
161157
162158``` html
163-
164159<!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 >
160+ <html >
161+ <head >
162+ {{"decoupled-map"|googlemap_js(37.4419, -122.1419, markers=[(37.4419,
163+ -122.1419)])}} {{mymap.js}} {{sndmap.js}}
164+ </head >
165+ <body >
166+ <h1 >Flask Google Maps Example</h1 >
167+
168+ <h2 >Template function centered, no marker</h2 >
169+ {{googlemap("simple-map", 37.4419, -122.1419)}}
170+
171+ <h2 >Template filter decoupled with single marker</h2 >
172+ {{"decoupled-map"|googlemap_html(37.4419, -122.1419)}}
173+
174+ <h2 >Template function with multiple markers</h2 >
175+ {% with map=googlemap_obj("another-map", 37.4419, -122.1419,
176+ markers=[(37.4419, -122.1419), (37.4300, -122.1400)]) %} {{map.html}}
177+ {{map.js}} {% endwith %}
178+
179+ <h2 >First map generated in view</h2 >
180+ {{mymap.html}}
181+
182+ <h2 >Second map generated in view</h2 >
183+ <h3 >Example for different icons in multiple markers with infoboxes</h3 >
184+ {{sndmap.html}}
185+ </body >
194186</html >
195-
196187```
197188
198189### Infobox
199190
200191Here's an example snippet of code:
192+
201193``` python
202194
203195 Map(
@@ -231,6 +223,39 @@ Here's an example snippet of code:
231223Which results in something like the following map:
232224<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 " >
233225
226+ ### Label
227+
228+ Here's an example snippet of code:
229+ ``` python
230+
231+ Map(
232+ identifier = " labelsmap" ,
233+ lat = 37.4419 ,
234+ lng = - 122.1419 ,
235+ markers = [
236+ {
237+ ' lat' : 37.4500 ,
238+ ' lng' : - 122.1350 ,
239+ ' label' : " X"
240+ },
241+ {
242+ ' lat' : 37.4419 ,
243+ ' lng' : - 122.1419 ,
244+ ' label' : " Y"
245+ },
246+ {
247+ ' lat' : 37.4300 ,
248+ ' lng' : - 122.1400 ,
249+ ' label' : " Z"
250+ }
251+ ]
252+ )
253+
254+ ```
255+
256+ Which results in something like the following map:
257+
258+ <img width =" 271 " alt =" Map showing markers with labels " src =" https://user-images.githubusercontent.com/708882/92332217-a3363280-f041-11ea-975c-0ac9413ada68.png " >
234259
235260### Fit all markers within bounds
236261
@@ -275,8 +300,7 @@ def map_bounded():
275300
276301![ image] ( https://user-images.githubusercontent.com/14223309/29294483-6ac3e532-8104-11e7-988c-5c19d700fe5b.png )
277302
278-
279- ### Geocoding and Reverse Geocoding
303+ ### Geocoding and Reverse Geocoding
280304
281305``` python
282306from flask_googlemaps import get_address, get_coordinates
@@ -292,7 +316,6 @@ print(get_coordinates(API_KEY,'Netaji Subhash Engineering College Kolkata'))
292316# output: {'lat': 22.4761596, 'lng': 88.4149326}
293317```
294318
295-
296319### Run the example app
297320
298321``` bash
0 commit comments