Google Map loading in Widgets

[gagnesteph]

You should replace : https://maps.google.com/maps/api/js?sensor=false

with

https://maps.google.com/maps/api/js?v=3&sensor=false

when loading google map api otherwise the map will not load anymore

[gregmuellegger]

Hi, thanks a lot for the report! It seems that the Google Maps API is require an API key now for every usage. Is this right? If so, then we need to add some settings to provide the key.

I don't know much about the Google Maps API so it would good to know what the "v=3" is doing and why we need it.

[gregmuellegger]

@gagnesteph did you get it working with the change you describe? Because I wasn't able to :(

[gagnesteph]

Yes I got it to work by adding the v=3!

import floppyforms.future as forms

class GMapPolygonWidget(forms.gis.BaseGMapWidget, forms.gis.PolygonWidget): map_width = 1000

class Media:
    extend = False
    js = ('js/openlayers/OpenLayers.js',
          'https://maps.google.com/maps/api/js?v=3&sensor=false',
          'floppyforms/js/MapWidget.js')

    css = {
        'all': ('css/openLayers/style.css',)
    }

For what I understand of it v = the version, since we use googleV3 I tried that and it worked.

[renanalencar]

@gagnesteph and @gregmuellegger I did like this:

class GMapPointWidget(forms.gis.BaseGMapWidget, forms.gis.PointWidget):

class Media:
    extend = False
    js = ('http://openlayers.org/api/2.13/OpenLayers.js',
          'https://maps.google.com/maps/api/js?v=3&sensor=false',
          'floppyforms/js/MapWidget.js')

The layer (with zoom out and zoom in buttons and marker) appears but the map doesn't when page finishes loading. However, it shows up when I zoom map in. I don't know how to fix it. Any idea?

[renanalencar]

@gagnesteph could you help me?

[gagnesteph]

I haven't done anything more than what I sent you!

I would like to help you more but it is working for me juste like this:

class GMapPolygonWidget(forms.gis.BaseGMapWidget, forms.gis.PolygonWidget): map_width = 1000

class Media:
    extend = False
    js = ('js/openlayers/OpenLayers.js',
          'https://maps.google.com/maps/api/js?v=3&sensor=false',
          'floppyforms/js/MapWidget.js')

    css = {
        'all': ('css/openLayers/style.css',)
    }

My site is served over SSL so I had to download the librairies because the online packages does not support https calls.

I'm sorry, i'm not very familiar with google api neither.

[gregmuellegger]

I've added v=3 to the URL. However the loading of the widget was still not working properly. It seems to be related to https://github.com/openlayers/openlayers/issues/1450

As a workaround I changed the default LonLat to be 0.1 and 0.1 instead of 0 and 0. I don't know why this changes anything, but that makes the map load for me work again. @gagnesteph @renanalencar does the current master solve anything for you?

I think the proper fix would be to upgrade MapWidget.js in floppyforms to use OpenLayers 3. However I currently don't feel competent enough in OpenLayers to do so. I would be very happy for a helping hand on that end.

[gagnesteph]

Where do you change the default LatLon?

2015-08-31 10:54 GMT-04:00 Gregor Müllegger notifications@github.com:

I've added v=3 to the URL. However the loading of the widget was still not working properly. It seems to be related to openlayers/openlayers#1450 https://github.com/openlayers/openlayers/issues/1450

As a workaround I changed the default LonLat to be 0.1 and 0.1 instead of 0 and 0. I don't know why this changes anything, but that makes the map load for me work again. @gagnesteph https://github.com/gagnesteph @renanalencar https://github.com/renanalencar does the current master solve anything for you?

I think the proper fix would be to upgrade MapWidget.js in floppyforms to use OpenLayers 3. However I currently don't feel competent enough in OpenLayers to do so. I would be very happy for a helping hand on that end.

— Reply to this email directly or view it on GitHub https://github.com/gregmuellegger/django-floppyforms/issues/159#issuecomment-136396960 .

STÉPHANE GAGNÉ Programmeur

[image: Reptiletech] http://www.reptiletech.com/?utm_source=signature&utm_medium=email&utm_campaign=sgagne

6400 Auteuil, bureau 210, Brossard (Québec) J4Z 3P5 Tel.450.466-9173, poste 234 Téléc.450.462.0926 sgagne@reptiletech.com Visitez notre site web http://www.reptiletech.com/?utm_source=signature&utm_medium=email&utm_campaign=sgagne [image: Suivez-nous] http://www.facebook.com/ReptileTech http://twitter.com/reptiletech http://www.youtube.com/reptiletech

Avis de confidentialité : Les informations contenues dans ce courriel de même que les fichiers joints sont confidentiels, et sont à l'usage exclusif du destinataire. Toute personne est par la présente avisée qu'il lui est strictement interdit de diffuser, de distribuer ou de reproduire ces informations sans le consentement écrit de Technologie Reptile inc. Si le destinataire ne peut être rejoint ou vous est inconnu, veuillez nous en informer, en retournant ce courriel. Par la suite, veuillez détruire ce courriel et toutes pièces pouvant lui être joint.

[gregmuellegger]

I did so in the MapWidget.js file: https://github.com/gregmuellegger/django-floppyforms/commit/131d4f789856c63383941337cffcc599d3dad74d

[gagnesteph]

Thanks

2015-09-01 9:47 GMT-04:00 Gregor Müllegger notifications@github.com:

I did so in the MapWidget.js file: 131d4f7 https://github.com/gregmuellegger/django-floppyforms/commit/131d4f789856c63383941337cffcc599d3dad74d

— Reply to this email directly or view it on GitHub https://github.com/gregmuellegger/django-floppyforms/issues/159#issuecomment-136728213 .

STÉPHANE GAGNÉ Programmeur

[image: Reptiletech] http://www.reptiletech.com/?utm_source=signature&utm_medium=email&utm_campaign=sgagne

6400 Auteuil, bureau 210, Brossard (Québec) J4Z 3P5 Tel.450.466-9173, poste 234 Téléc.450.462.0926 sgagne@reptiletech.com Visitez notre site web http://www.reptiletech.com/?utm_source=signature&utm_medium=email&utm_campaign=sgagne [image: Suivez-nous] http://www.facebook.com/ReptileTech http://twitter.com/reptiletech http://www.youtube.com/reptiletech

Avis de confidentialité : Les informations contenues dans ce courriel de même que les fichiers joints sont confidentiels, et sont à l'usage exclusif du destinataire. Toute personne est par la présente avisée qu'il lui est strictement interdit de diffuser, de distribuer ou de reproduire ces informations sans le consentement écrit de Technologie Reptile inc. Si le destinataire ne peut être rejoint ou vous est inconnu, veuillez nous en informer, en retournant ce courriel. Par la suite, veuillez détruire ce courriel et toutes pièces pouvant lui être joint.

[gagnesteph]

For thos who have problems again with the map not showing, I fixed mine using this solution:

https://github.com/vitalidze/traccar-web/commit/b7485a2a2acc12d5df9744f82b3c72468c9cb6ae

Still using the 3.20 version of google api

Good luck

[gregmuellegger]

Sweet! I tested locally and seems to work. I applied this patch now as well. The changes are in master, could you please test as well to see if we are on the right track. After that I can prepare a new release so that anyone can benefit from this.

Thanks for your ongoing efforts!