flask-extensions / flask-googlemaps Goto Github PK

Links with icon file urls included in the icons.py https://github.com/rochacbruno/Flask-GoogleMaps/blob/master/flask_googlemaps/icons.py

Code base when installing extension from pip does not support marker icons. Receive javascript error. I manually updated my codebase from GitHub and it worked. Just an FYI! Thanks!

To fix this line https://github.com/rochacbruno/Flask-GoogleMaps/blob/master/flask_googlemaps/templates/googlemaps/gmapjs.html#L38 fails when there is unicode data in marker

I made a upgrade to the new version and i'm getting a JS error now:

`var raw_markers = [{'lat': u'-19.9520738', 'lng': u'-43.9490132', 'icon': '//maps.google.com/mapfiles/ms/icons/red-dot.png'}];``

You can see that it is including u in front of lat lng.

I checked in the source and it seems to be correct gmap.markers|tojson|safe , but when using pip install flask-googlemaps --upgrade it is not installing the same version that we have here.

Is something needed to update on pip? Maybe need to change the version? (from 0.2.2 to 0.2.3) ?

Hi 👊

This is my first visit to this fine repo, but it seems you have been working hard to keep all dependencies updated so far.

Once you have closed this issue, I'll create seperate pull requests for every update as soon as I find one.

That's it for now!

Happy merging! 🤖

INclude info from #56 in to readme.md

I'm on Flask 0.7.2, and when I try to import 'flask-googlemaps' and add 'GoogleMaps(app)' , I receive a SIGTERM with the following error message:

'''
(env)macs-MacBook-Pro:facebook-template-python mac$ foreman start
03:17:33 web.1 | started with pid 2212
03:17:33 web.1 | Traceback (most recent call last):
03:17:33 web.1 | File "exampleapp.py", line 158, in
03:17:33 web.1 | GoogleMaps(app)
03:17:33 web.1 | File "/Users/mac/Dropbox/development/facebook-template-python/env/lib/python2.7/site-packages/flask_googlemaps/init.py", line 57, in init
03:17:33 web.1 | self.init_app(app)
03:17:33 web.1 | File "/Users/mac/Dropbox/development/facebook-template-python/env/lib/python2.7/site-packages/flask_googlemaps/init.py", line 62, in init_app
03:17:33 web.1 | app.add_template_filter(googlemap_html)
03:17:33 web.1 | AttributeError: 'Flask' object has no attribute 'add_template_filter'
03:17:33 web.1 | exited with code 1
03:17:33 system | sending SIGTERM to all processes
SIGTERM received
'''

closed

This is a feature I for one would love to use

I am trying to record the lat/long data from user click. JS can do it with something like:
google.maps.event.addListener(map, 'click', function(event) {placeMarker(map, event.latLng, marker);});

How can i pass the this "event.latLng" to the flask? Can we add this api to flask_googlemaps?

can we add dynamic data like moving vehicle without refreshing page?

Opa, @rochacbruno quando tentei instalar a extensão foi retornado para mim um erro de compatibilidade com o SQLAlchemy. O erro foi o seguinte:

Collecting flask-googlemaps
  Using cached Flask_GoogleMaps-0.2.5-py2.py3-none-any.whl
Requirement already satisfied: flask in ./venv/lib/python3.5/site-packages (from flask-googlemaps) (0.12.2)
Requirement already satisfied: itsdangerous>=0.21 in ./venv/lib/python3.5/site-packages (from flask->flask-googlemaps) (0.24)
Requirement already satisfied: Jinja2>=2.4 in ./venv/lib/python3.5/site-packages (from flask->flask-googlemaps) (2.10)
Requirement already satisfied: Werkzeug>=0.7 in ./venv/lib/python3.5/site-packages (from flask->flask-googlemaps) (0.14.1)
Requirement already satisfied: click>=2.0 in ./venv/lib/python3.5/site-packages (from flask->flask-googlemaps) (6.7)
Requirement already satisfied: MarkupSafe>=0.23 in ./venv/lib/python3.5/site-packages (from Jinja2>=2.4->flask->flask-googlemaps) (1.0)
flask-sqlalchemy 2.3.2 has requirement Flask>=0.10, but you'll have flask GoogleMaps which is incompatible.
Installing collected packages: flask-googlemaps
Successfully installed flask-googlemaps

Diz que foi instalado com sucesso, mas na verdade não instala.

I hope you don't mind me intruding :)
But I'm loving web2py and would love an example of it :)

Also your web2pyslices.com is down

It will be nice to be able to filter by type of markers, example

Display:

• Blue markers
• Red markers
• Green markers

• 1. I have a list filled with text, ie ['text1', 'text2', 'text3']
• 2. If I use only one item from the list with the infobox parameter then, as expected, an infobox containing that single text is attached to each marker.
• 3. However, if I use the entire list with the infobox parameter, the map doesn't load at all.

See my code from views.py

@app.route('/')
@app.route('/index', methods=['GET', 'POST'])
@login_required
def index():
    coords = pickle.load(open("coordinates.p", "rb"))
    addresses = pickle.load(open("addresses.p", "rb"))
    mymap = Map(
        identifier="view-side",
        style="height:100%; width:100%; left:0; position:absolute;z-index:200;",
        lat=coords[0][0],
        lng=coords[0][1],
        zoom='5',
        infobox=addresses,  # does not work, but if I change it to addresses[0] it works with out issue
        markers=coords
    )
    return render_template('index.html', mymap=mymap)

Hey!
I am using Flask-googleMaps for a NASA Space Apps Challenge and its been working great so far, thanks for making it! I have hit one issue I was hoping to pick your mind about and see if you have a solution.

I am tring to render over 20k +/- circles on the map to show wildfires detected by satellite. I believe I implemented FGM properly but it takes forever to load. I think this is because of the very large dataset I am loading.

Do you have any ideas for ways that I can either stream the circles in over time or something else that will work to load them?

Dynamic icons from google charts:
https://developers.google.com/chart/infographics/docs/dynamic_icons?csw=1#pins

[ ]'s

When you have multiple icons, you can't set different infoboxes for each icon.

In the initialize_ function in gmapsj.html, the getInfoCallback({{gmap.varname}}, "{{gmap.infobox[loop.index0]|safe}}")) is inside the markers[icon] loop:

      {% for icon in gmap.markers %}
            {% for marker in gmap.markers[icon] %}
                var marker_{{loop.index0}} = new google.maps.Marker({
                    position: new google.maps.LatLng({{marker.0}}, {{marker.1}}),
                    map: {{gmap.varname}},
                    icon: "{{ icon }}"
                });
                {% if gmap.infobox != None %}
                        {% if gmap.typeflag %}
                            google.maps.event.addListener(marker_{{loop.index0}}, 'click',
                            getInfoCallback({{gmap.varname}}, "{{gmap.infobox[loop.index0]|safe}}"));
                        {% else %}
                            google.maps.event.addListener(marker_{{loop.index0}}, 'click',
                            getInfoCallback({{gmap.varname}}, "{{gmap.infobox|safe}}"));
                        {% endif %}
                {% endif %}
            {% endfor %}
        {% endfor %}

In the case where you have one marker per icon and a infobox list, you always get the first value of the list for every marker.

It's not clear to me what's the best way to add multiple infoboxes for multiple icons without breaking the multiple infoboxes for multiple markers with one icon. Maybe a flag multipleiconflag and a call to getInfoCallback outside the marker loop?

I tried to render a clustered map created as indicated in http://flaskgooglemaps.pythonanywhere.com/

I only have two markers, but as I zoom out they get grouped together but in the map only the number 2 is displayed with no icon. What am I doing wrong?

Hi! It is possible to add some text description to each marker?

Does this module provide the ability to add labels to markers placed on the map?

Add option to show infobox on hover and persist on click.

Example

                    if (item["infobox"]) {
                        (function(_infobox, _map, _marker){
                            _marker.infoWindow = new google.maps.InfoWindow({
                                content: _infobox
                            });
                            _marker.addListener('click', function() {
                                _marker.infoWindow.open(_map, _marker);
                                _marker["persist"] = true;
                            });
                            google.maps.event.addListener(_marker.infoWindow,'closeclick',function(){
                               _marker["persist"] = null;
                            });
                            _marker.addListener('mouseover', function() {
                                _marker.infoWindow.open(_map, _marker);
                            });
                            _marker.addListener('mouseout', function() {
                                if (!_marker["persist"]) {
                                    _marker.infoWindow.close();
                                }
                            });
                        })(item["infobox"], map, marker);
                    }

Hi,

I have a problem when I load my site with https protocol, and the script (gmaps) loads over http.

The message is the following:
was loaded over HTTPS, but requested an insecure script 'http://maps.googleapis.com/maps/api/js?sensor=false'. This request has been blocked; the content must be served over HTTPS.

Thx,

This would make things a lot more convenient for laptop users. I'm not sure how hard it is to code, but the feature would make for a huge improvement.

http://flaskgooglemaps.pythonanywhere.com

Hello
how can i inject data from mysql to maps, i use this code but its not working:

users = User.query.all()
fullmap = Map(
           identifier="fullmap",
           varname="fullmap",
           style=(
               "height:100%;"
               "width:100%;"
               "top:0;"
               "left:0;"
               "position:absolute;"
               "z-index:10;"               
           ),
            
           lat=37.4419,
           lng=-122.1419,           
            
           markers=[
               {           
                   'icon': 'static/img/icons/home1.png',
                   'title': 'Adresse Home',
                   'lat': user.latitude,
                   'lng': user.longitude,
                   'infobox': (
                       "Hello I am <b style='color:#ffcc00;'>YELLOW</b>!"
                       "<h3>"user.first_name"</h3>"
                       "<img src='user.image'>"
                       "<br>Images allowed!"
                   )
               }for user in users:],

Can you help me please. Thank you

Hi,

I can't find an example so I try this code but can't change the center position:

movingmap_markers.map(function(mk){mk.setCenter({lat: 37.44, lng:-122.135})})

Regards,

currently DEFAULT_ICON has a scheme: https://github.com/rochacbruno/Flask-GoogleMaps/blob/master/flask_googlemaps/__init__.py#L5

but it needs to be // to not depend on a scheme

the idea is to put DEFAULT_ICON on app.config and read from there

Hi,

in fullmap I want pass a series of markers lat long extract from mydatabase, but I don't understand How can I pass the list of dict.

like for m in lista_co:
appo=[
{
'icon': '//maps.google.com/mapfiles/ms/icons/green-dot.png',
'lat': m['lat'],
'lng': m['long'],
'infobox': "Questo e' un marker di prova"
}]
markers.append(appo)
I want pass markers to Map ()...

pallets/flask#1135

Use from flask_foo import bar instead of from flask.ext.foo import bar.

Not sure if this is an issue with Flask-Googlemaps or just human error. I am currently using the library on an app deployed on Heroku, and now see the following error when I try to load a page where I am calling Flask-Googlemaps.

2018-03-20T15:05:30.959296+00:00 app[web.1]:   File "/app/.heroku/python/lib/python3.6/site-packages/flask_googlemaps/__init__.py", line 703, in render
2018-03-20T15:05:30.959297+00:00 app[web.1]:     return render_template(*args, **kwargs)
2018-03-20T15:05:30.959299+00:00 app[web.1]:   File "/app/.heroku/python/lib/python3.6/site-packages/flask/templating.py", line 133, in render_template
2018-03-20T15:05:30.959301+00:00 app[web.1]:     return _render(ctx.app.jinja_env.get_or_select_template(template_name_or_list),
2018-03-20T15:05:30.959302+00:00 app[web.1]:   File "/app/.heroku/python/lib/python3.6/site-packages/flask/templating.py", line 57, in get_source
2018-03-20T15:05:30.959304+00:00 app[web.1]:     return self._get_source_fast(environment, template)
2018-03-20T15:05:30.959306+00:00 app[web.1]:   File "/app/.heroku/python/lib/python3.6/site-packages/flask/templating.py", line 85, in _get_source_fast
2018-03-20T15:05:30.959308+00:00 app[web.1]:     raise TemplateNotFound(template)
2018-03-20T15:05:30.959393+00:00 app[web.1]: jinja2.exceptions.TemplateNotFound: googlemaps/gmapjs.html

I recently changed the app from having a single "journal.py" module which contained everything (routes, config stuff, models) to one where all this was spread across multiple modules. Previously my app looked like this...

/journal
    journal.py
    Procfile
    requirements.txt
    runtime.txt
    /templates
    /static

Now it looks like this....

/journal
    /app
        __init__.py
        models.py
        routes.py
        config.py
        /templates
        /static
    journal.py
    Procfile
    requirements.txt
    runtime.txt

I have confirmed that I am using the latest version (0.2.5).

This is an awesome tool. It has really made my life easy. Thanks for making it available to the community.

Simple maps working good, same as the other maps which just need to put block of code directly on template file.
But the maps that need to put block of code on views & template files, don't work with error undefined mapname.
i.e. when I use mymap = Map (...) (views file), then put the {{mymap.js}} on template header and {{mymap.html}} on template body, it will turn out to error UndefinedError: 'mymap' is undefined.
Did I miss something? I have following the instructions on the front page, like registering maps to the __init__.py, importing maps into my views, put mymap=mymap in the return render_template() and so on.

Thank you.

I need some help, In my project i used the normal kind of templating with a default layout and every other extends this.

• When adding a map to lets say a profile.html which extends layout.html, how can i add mymap.js to the <head> tag if this profile page does not have a head, only the one from the layout?
• If i add this mymap.js to the layout, my pages will definitely crash because i am sending this resource only from the profile app context.

Do you have a special way for this situation or is there a workaround?

Thank you.

I would like to use themes from https://mapstyle.withgoogle.com/ . Is there a way to get this integrated into this plugin?

Hi,

I try to use the sample on Windows and it doesn't work

Only linux?

This issue is related to #27

function initialize_{{gmap.varname}}() {
               var {{gmap.varname}} = new google.maps.Map(
                         document.getElementById('{{gmap.identifier}}') )
       //...

Please add an option to export the var {{gmap.varname}} as a window var like

var {{gmap.varname}} = new google.maps.Map(
                         document.getElementById('{{gmap.identifier}}') )
window[{{gmap.varname}}]={{gmap.varname}}

In this way it will be possible to add markers from the page like

var marker = new google.maps.Marker({
    position: myLatlng,
    title:"Hello World!"
});

// To add the marker to the map, call setMap();
marker.setMap(window.map);

Please add some examples of js files, like fullmap.js

by @macgngsta in https://github.com/AHAAAAAAA/PokemonGo-Map/issues/396

As awesome as Flask-GoogleMaps is in creating a quick google map, there is no support for other google apis, such as places API

https://developers.google.com/maps/documentation/javascript/examples/places-searchbox

i actually tried to get a search box in, but it requires loading the places library after the google key, and i think that without some significant effort on adding to the flask-googlemaps project or making a short term hack would be the only way

there also could be a possibility of going openstreet maps instead of google maps.

So I think this is one easy thing to add

I've been using Flask-GoogleMaps to display some companies that are partnering with us.

I would be great if we had a way to center the map based on user's location.
So then users could see easily all the markers around them.

For now, I'm using request.access_route to get user's IP/Location and then, set the lat and lng variables.

Wondering if it could be included in the next versions.

Hi Guys,

I was searching for google maps API and found this. really like Flask_GoogleMaps. Is there any support for Distance Matrix?

Thanks

0.2.4 is fine, regression occurs at 0.2.5

Repro is easy:

pip install -v flask-googlemaps

Tidbit you're interested in is

Installing collected packages: Werkzeug, MarkupSafe, Jinja2, click, itsdangerous, flask, flask-googlemaps

  Compiling /private/var/folders/2h/0dr8jftd1916yq_lp40__wzh0000gn/T/pip-build-avapA_/Jinja2/jinja2/asyncfilters.py ...
    File "/private/var/folders/2h/0dr8jftd1916yq_lp40__wzh0000gn/T/pip-build-avapA_/Jinja2/jinja2/asyncfilters.py", line 7
      async def auto_to_seq(value):
              ^
  SyntaxError: invalid syntax

  Compiling /private/var/folders/2h/0dr8jftd1916yq_lp40__wzh0000gn/T/pip-build-avapA_/Jinja2/jinja2/asyncsupport.py ...
    File "/private/var/folders/2h/0dr8jftd1916yq_lp40__wzh0000gn/T/pip-build-avapA_/Jinja2/jinja2/asyncsupport.py", line 22
      async def concat_async(async_gen):
              ^
  SyntaxError: invalid syntax

Impact to user is when you do pip freeze it won't show Flask-GoogleMaps==0.2.5

The error is coming from Jinja but pip install Flask still causes Flask to show up in pip freeze, so something is wrong with the setup.py

The demo app is in https://github.com/rochacbruno/Flask-GoogleMaps/tree/master/examples

Accessible in: http://flaskgooglemaps.pythonanywhere.com

The page currently is very simple and needs improvements.

• Better layout (simple, yet beautiful) (example: https://jz6.github.io/PoGoMap/ )
• A menu bar to handle project links (repo, chat, issues etc)
• mobile enabled (responsive)
• split the demo into different views (one per map with links in menu bar)
• Put better code example below each map, with (html + python) tabs and code highlight (maybe using embedded gist)
• A section "who uses fgmaps" including https://github.com/AHAAAAAAA/PokemonGo-Map
• Include Flask-Caching in demo app views

Is there a way to alter a map object to make it bootstrap responsive?

Right now I use the following block in my html template:

{% with map=googlemap_obj("my-map", lat=user_lat, lng=user_lng, markers=user_markers, zoom=16, style="height:900px;width:900px;") %}
{{map.html}}
{{map.js}}
{% endwith %}

Hello,

First, thanks a lot, it is a very good addition to Flask

I am trying to use the custom markers, and they never show up, even if i use your example or other pictures. I don't see any errors showing up in flask or the python console

Thanks

I am invoking the Map class, trying to modify the style variable, but I'm not seeing any response in the output. Do you have any additional examples you could provide? My code below, any help would be appreciated!

From my app/init.py:

@app.route("/", methods=['POST','GET'])
def main():
	sndmap = Map(
		identifier="sndmap",
		lat=33.753746,
                lng=-84.386330,
                style="height:200px;width:200px:margin:0;",  # <---
                ....
                )
        return render_template('index.html', sndmap=sndmap)

From my html file:

<head>
    ....
    {{sndmap.js}}
</head>

<section>
    <center>
    {{sndmap.html}}
    <p></p>
    <ul class="actions">
        <li><a href="/learnmore" class="button alt">Learn More</a></li>
    </ul>
    </center>
</section>

Currently I need to use the standart script line proposed by google. If I dont use this I get an error No-Key-Error and the map doesnt show:
<script src="https://maps.googleapis.com/maps/api/js?key=MYKEY&signed_in=true&libraries=places"></script>

It seems that these have no effect, because if I remove the script line I get again the No-Key-Error:

GoogleMaps(app, key="MYKEY")

or in my config.py

GOOGLEMAPS_KEY = "MYKEY"

So currently I need to use both, the mymap.js and the script line, which lead to "You have included the Google Maps API multiple times on this page" but still works. Also I cant disable the scroll_wheel. I am setting up the map in python:

mymap = Map(
    identifier="view-side",
    lat=location.latitude,
    lng=location.longitude,
    infobox=[],
    markers=[],
    scroll_wheel = False,
    zoom = 11
)

The scroll_wheel = False does not do anything here, eventhough I found it in the documentation.

On the demo page, all the maps show Oops! Something went wrong

I'm rendering this map

map = Map(
        identifier='map',
        style='height:100%;width:100%;top:0;left:0;position:absolute;z-index:200;',
        lat=deflat,
        lng=deflng,
        markers=markers,
        zoom='15', )
    return render_template('map.html', mymap=map)

and in the html

{{mymap.js}}

Now I want to add markers dynamically to this map with jQuery like

var marker = new google.maps.Marker({
    position: myLatlng,
    title:"Hello World!"
});

// To add the marker to the map, call setMap();
marker.setMap(map);

so I need a reference to this map object in the page, so how?