{"id":19686367,"url":"https://github.com/flask-extensions/flask-googlemaps","last_synced_at":"2025-05-15T11:00:17.688Z","repository":{"id":12020483,"uuid":"14603772","full_name":"flask-extensions/Flask-GoogleMaps","owner":"flask-extensions","description":"Easy way to add GoogleMaps to Flask applications. maintainer: @getcake","archived":false,"fork":false,"pushed_at":"2024-05-30T21:50:31.000Z","size":6394,"stargazers_count":651,"open_issues_count":43,"forks_count":195,"subscribers_count":32,"default_branch":"master","last_synced_at":"2025-05-15T05:16:03.954Z","etag":null,"topics":["flask","flask-extensions","google-maps","google-maps-api","googlemaps","hacktoberfest","hacktoberfest2020","map","maps"],"latest_commit_sha":null,"homepage":"https://flask-googlemaps.com","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/flask-extensions.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2013-11-21T23:52:29.000Z","updated_at":"2025-04-20T13:19:27.000Z","dependencies_parsed_at":"2024-05-06T11:33:31.966Z","dependency_job_id":"9b7bcbf9-01e7-4978-a649-0115c5b4195b","html_url":"https://github.com/flask-extensions/Flask-GoogleMaps","commit_stats":{"total_commits":138,"total_committers":42,"mean_commits":"3.2857142857142856","dds":0.6811594202898551,"last_synced_commit":"6d891695e8272416880180b1c048d3be38ad4742"},"previous_names":["rochacbruno/flask-googlemaps"],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flask-extensions%2FFlask-GoogleMaps","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flask-extensions%2FFlask-GoogleMaps/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flask-extensions%2FFlask-GoogleMaps/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flask-extensions%2FFlask-GoogleMaps/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/flask-extensions","download_url":"https://codeload.github.com/flask-extensions/Flask-GoogleMaps/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254328384,"owners_count":22052632,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["flask","flask-extensions","google-maps","google-maps-api","googlemaps","hacktoberfest","hacktoberfest2020","map","maps"],"created_at":"2024-11-11T18:27:44.568Z","updated_at":"2025-05-15T11:00:17.603Z","avatar_url":"https://github.com/flask-extensions.png","language":"Python","readme":"\n# Flask Google Maps [![Generic badge](https://img.shields.io/badge/PayPal-Donante-red.svg)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick\u0026hosted_button_id=2UGZHBYZV39XY\u0026source=url)\n\n[![Flask Estension](https://img.shields.io/badge/flask-extension-green.svg?style=flat)](https://flaskextensions.com)\n[![PyPI version fury.io](https://badge.fury.io/py/flask-googlemaps.svg)](https://pypi.python.org/pypi/flask-googlemaps/)\n[![PyPI download month](https://img.shields.io/pypi/dm/flask-googlemaps.svg)](https://pypi.org/project/flask-googlemaps/)\n[![PyPI license](https://img.shields.io/pypi/l/flask-googlemaps.svg)](https://pypi.python.org/pypi/flask-googlemaps/)\n[![PyPI format](https://img.shields.io/pypi/format/flask-googlemaps.svg)](https://pypi.python.org/pypi/flask-googlemaps/)\n[![PyPI status](https://img.shields.io/pypi/status/flask-googlemaps.svg)](https://pypi.python.org/pypi/flask-googlemaps/)\n[![CI-Github](https://github.com/flask-extensions/Flask-GoogleMaps/workflows/CI/badge.svg)](https://github.com/flask-extensions/Flask-GoogleMaps/workflows/CI/badge.svg)\n[![Code style: black](https://img.shields.io/badge/code%20style-black-000000.svg)](https://github.com/psf/black)\n\nEasy to use Google Maps in your Flask application\n\n## requires\n\n- Jinja\n- Flask\n- A google api key [get here](https://developers.google.com/maps/documentation/javascript/get-api-key)\n\n## Contribute\n\nTo contribute with the project, clone it, create a virtualenv and install all of you need to dev, see below:\n\n```bash\ngit clone https://github.com/flask-extensions/Flask-GoogleMaps.git\ncd Flask-GoogleMaps\npoetry use env 3.8  # just to create virtualenv at the first time\npoetry shell # activate virtualenv\npoetry install  # to install all for dev\npre-commit install # to install pre-commit hooks\n```\n\n## Installation\n\nTo use in your project just use your dependency manager to install it, with pip is like this:\n\n```bash\npip install flask-googlemaps\n```\n\n## How it works\n\nFlask-GoogleMaps includes some global functions and template filters in your Jinja environment, also it allows you to use the Map in views if needed.\n\n### registering\n\nin your app\n\n```python\n\nfrom flask import Flask\nfrom flask_googlemaps import GoogleMaps\n\napp = Flask(__name__)\n\n# you can set key as config\napp.config['GOOGLEMAPS_KEY'] = \"8JZ7i18MjFuM35dJHq70n3Hx4\"\n\n# Initialize the extension\nGoogleMaps(app)\n\n# you can also pass the key here if you prefer\nGoogleMaps(app, key=\"8JZ7i18MjFuM35dJHq70n3Hx4\")\n\n```\n\nIn template\n\n```html\n{{googlemap(\"my_awesome_map\", lat=0.23234234, lng=-0.234234234, markers=[(0.12,\n-0.45345), ...])}}\n```\n\nThat's it! now you have some template filters and functions to use, more details in examples and screenshot below.\n\n### Usage\n\n- You can create the map in the view and then send to the template context\n- you can use the template functions and filters directly\n\n#### 1. View\n\n```python\n\nfrom flask import Flask, render_template\nfrom flask_googlemaps import GoogleMaps\nfrom flask_googlemaps import Map\n\napp = Flask(__name__, template_folder=\".\")\nGoogleMaps(app)\n\n@app.route(\"/\")\ndef mapview():\n    # creating a map in the view\n    mymap = Map(\n        identifier=\"view-side\",\n        lat=37.4419,\n        lng=-122.1419,\n        markers=[(37.4419, -122.1419)]\n    )\n    sndmap = Map(\n        identifier=\"sndmap\",\n        lat=37.4419,\n        lng=-122.1419,\n        markers=[\n          {\n             'icon': 'http://maps.google.com/mapfiles/ms/icons/green-dot.png',\n             'lat': 37.4419,\n             'lng': -122.1419,\n             'infobox': \"\u003cb\u003eHello World\u003c/b\u003e\"\n          },\n          {\n             'icon': 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png',\n             'lat': 37.4300,\n             'lng': -122.1400,\n             'infobox': \"\u003cb\u003eHello World from other place\u003c/b\u003e\"\n          }\n        ]\n    )\n    return render_template('example.html', mymap=mymap, sndmap=sndmap)\n\nif __name__ == \"__main__\":\n    app.run(debug=True)\n\n```\n\n##### `Map()` Parameters\n\n- **lat**: The latitude coordinate for centering the map.\n- **lng**: The longitude coordinate for centering the map.\n- **zoom**: The zoom level. Defaults to `13`.\n- **maptype**: The map type - `ROADMAP`, `SATELLITE`, `HYBRID`, `TERRAIN`. Defaults to `ROADMAP`.\n- **markers**: Markers array of tuples having (**lat**, **lng**, infobox, icon, label). Defaults to `None`.\n- or **markers**: a list of dicts containing **lat**, **lng**, infobox, icon, label.\n- or **markers**: Markers dictionary with icon urls as keys and markers array as values.\n- **varname**: The instance variable name.\n- **style**: A string containing CSS styles. Defaults to `\"height:300px;width:300px;margin:0;\"`.\n- **identifier**: The CSS ID selector name.\n- **cls**: The CSS Class selector name. Defaults to `\"map\"`.\n- **language**: The map language. Defaults to `\"en\"`.\n- **region**: The map region. Defaults to `\"US\"`.\n\nAlso controls True or False:\n\n- zoom_control\n- maptype_control\n- scale_control\n- scale_control\n- streetview_control\n- rotate_control\n- fullscreen_control\n- scroll_wheel\n- collapsible (map collapses by click on **varname**\\_collapse button)\n- mapdisplay (show a collapsible map by default or not)\n- center_on_user_location (using HTML5 Geolocation)\n\n#### 2. Template\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    {{\"decoupled-map\"|googlemap_js(37.4419, -122.1419, markers=[(37.4419,\n    -122.1419)])}} {{mymap.js}} {{sndmap.js}}\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003ch1\u003eFlask Google Maps Example\u003c/h1\u003e\n\n    \u003ch2\u003eTemplate function centered, no marker\u003c/h2\u003e\n    {{googlemap(\"simple-map\", 37.4419, -122.1419)}}\n\n    \u003ch2\u003eTemplate filter decoupled with single marker\u003c/h2\u003e\n    {{\"decoupled-map\"|googlemap_html(37.4419, -122.1419)}}\n\n    \u003ch2\u003eTemplate function with multiple markers\u003c/h2\u003e\n    {% with map=googlemap_obj(\"another-map\", 37.4419, -122.1419,\n    markers=[(37.4419, -122.1419), (37.4300, -122.1400)]) %} {{map.html}}\n    {{map.js}} {% endwith %}\n\n    \u003ch2\u003eFirst map generated in view\u003c/h2\u003e\n    {{mymap.html}}\n\n    \u003ch2\u003eSecond map generated in view\u003c/h2\u003e\n    \u003ch3\u003eExample for different icons in multiple markers with infoboxes\u003c/h3\u003e\n    {{sndmap.html}}\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n### Infobox\n\nHere's an example snippet of code:\n\n```python\n\n    Map(\n        identifier=\"catsmap\",\n        lat=37.4419,\n        lng=-122.1419,\n        markers=[\n            {\n                'icon': 'http://maps.google.com/mapfiles/ms/icons/green-dot.png',\n                'lat':  37.4419,\n                'lng':  -122.1419,\n                'infobox': \"\u003cimg src='cat1.jpg' /\u003e\"\n            },\n            {\n                'icon': 'http://maps.google.com/mapfiles/ms/icons/blue-dot.png',\n                'lat': 37.4300,\n                'lng': -122.1400,\n                'infobox': \"\u003cimg src='cat2.jpg' /\u003e\"\n            },\n            {\n                'icon': 'http://maps.google.com/mapfiles/ms/icons/yellow-dot.png',\n                'lat': 37.4500,\n                'lng': -122.1350,\n                'infobox': \"\u003cimg src='cat3.jpg' /\u003e\"\n            }\n        ]\n    )\n\n```\n\nWhich results in something like the following map:\n\u003cimg 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\"\u003e\n\n### Label\n\nHere's an example snippet of code:\n```python\n\nMap(\n        identifier=\"labelsmap\",\n        lat=37.4419,\n        lng=-122.1419,\n        markers=[\n            {\n                'lat': 37.4500,\n                'lng': -122.1350,\n                'label': \"X\"\n            },\n            {\n                'lat':  37.4419,\n                'lng':  -122.1419,\n                'label': \"Y\"\n            },\n            {\n                'lat': 37.4300,\n                'lng': -122.1400,\n                'label': \"Z\"\n            }\n        ]\n    )\n\n```\n\nWhich results in something like the following map:\n\n\u003cimg width=\"271\" alt=\"Map showing markers with labels\" src=\"https://user-images.githubusercontent.com/708882/92332217-a3363280-f041-11ea-975c-0ac9413ada68.png\"\u003e\n\n### Fit all markers within bounds\n\nAllow users to easily fit all markers within view on page load\n\n#### Without bounds\n\n```python\n\n@app.route('/map-unbounded/')\ndef map_unbounded():\n\"\"\"Create map with markers out of bounds.\"\"\"\n    locations = []    # long list of coordinates\n    map = Map(\n        lat=locations[0].latitude,\n        lng=locations[0].longitude,\n        markers=[(loc.latitude, loc.longitude) for loc in locations]\n    )\n    return render_template('map.html', map=map)\n\n```\n\n![image](https://user-images.githubusercontent.com/14223309/29294427-24a8d4e0-8104-11e7-967b-0c55c20d0f7c.png)\n\n#### With bounds\n\n```python\n\n@app.route('/map-bounded/')\ndef map_bounded():\n\"\"\"Create map with all markers within bounds.\"\"\"\n    locations = []    # long list of coordinates\n    map = Map(\n        lat=locations[0].latitude,\n        lng=locations[0].longitude,\n        markers=[(loc.latitude, loc.longitude) for loc in locations],\n        fit_markers_to_bounds = True\n    )\n    return render_template('map.html', map=map)\n\n```\n\n![image](https://user-images.githubusercontent.com/14223309/29294483-6ac3e532-8104-11e7-988c-5c19d700fe5b.png)\n\n### Geocoding and Reverse Geocoding\n\n```python\nfrom flask_googlemaps import get_address, get_coordinates\nAPI_KEY = 'YOUR API KEY'\n\n#Reverse Geocoding: getting detailed address from coordinates of a location\nprint(get_address(API_KEY,22.4761596,88.4149326))\n#output: {'zip': '700150', 'country': 'India', 'state': 'West Bengal', 'city': 'Kolkata', 'locality': 'Kolkata', 'road': 'Techno City', 'formatted_address': 'Sirin Rd, Mauza Ranabhutia, Techno City, Kolkata, West Bengal 700150, India'}\n\n\n#Geocoding: getting coordinates from address text\nprint(get_coordinates(API_KEY,'Netaji Subhash Engineering College Kolkata'))\n#output: {'lat': 22.4761596, 'lng': 88.4149326}\n```\n\n### Run the example app\n\n```bash\n$ git clone https://github.com/flask-extensions/Flask-GoogleMaps\n$ cd Flask-GoogleMaps/\n```\n\nIf you have Poetry\n\n```bash\n$ poetry install\n```\n\nwithout poetry\n\n```bash\n$ pip install --upgrade pip\n$ pip install -e .\n$ pip install -r requirements.txt\n```\n\nRun it.\n\n```bash\n$ FLASK_GOOGLEMAPS_KEY=\"YourKeyHERE\" FLASK_APP=examples/example.py flask run\nrunning on localhost:5000 .....\n```\n\nAccess: http://localhost:5000/ and http://localhost:5000/fullmap\n\n## Contribute with the Google Maps API\n\nPlease see this page [developers.google.com/maps/documentation/javascript/tutorial](https://developers.google.com/maps/documentation/javascript/tutorial) and contribute!\n","funding_links":["https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick\u0026hosted_button_id=2UGZHBYZV39XY\u0026source=url"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflask-extensions%2Fflask-googlemaps","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fflask-extensions%2Fflask-googlemaps","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflask-extensions%2Fflask-googlemaps/lists"}