google_map field not working in Production env

[mkt-van]

Bug report

google_maps seems not to be working when changing env=production, but all working fine in local. This is my code inside my controller.

        CRUD::field([
            'name' => 'latlong',
            'label' => 'Establishment Location',
            'type' => 'google_map',
            'map_options' => [
                'default_lat' => env('DEFAULT_LAT'),
                'default_lng' => env('DEFAULT_LONG'),
            ]
        ]);

I'm getting this error everytime I change my env to 'production'

Uncaught SyntaxError: Unexpected token '<'
google_places_api_script-1dd93d87.js:1 Uncaught SyntaxError: 

I tried to replicate it on my other laravel backpack projects and it happen the same, google_map is not working in production env.

Backpack, Laravel, PHP, DB version

php 8.1

When I run php artisan backpack:version the output is:

backpack/basset: 1.3.4
backpack/crud: 6.7.17
backpack/generators: v4.0.5
backpack/permissionmanager: 7.2.1
backpack/pro: 2.2.4
backpack/theme-tabler: 1.2.10

[welcome[bot]]

Hello there! Thanks for opening your first issue on this repo!

Just a heads-up: Here at Backpack we use GitHub Issues only for tracking bugs. Talk about new features is also acceptable. This helps a lot in keeping our focus on improving Backpack. If you issue is not a bug/feature, please help us out by closing the issue yourself and posting in the appropriate medium (see below). If you're not sure where it fits, it's ok, a community member will probably reply to help you with that.

Backpack communication channels:

• Bug Reports, Feature Requests - GitHub Issues (here);
• Quick help (How do I do X) - Gitter Chatroom;
• Long questions (I have done X and Y and it won't do Z wtf) - Stackoverflow, using the backpack-for-laravel tag;
• Showing off something you've made, asking for opinion on Backpack/Laravel matters - Reddit;

Please keep in mind Backpack offers no official / paid support. Whatever help you receive here, on Gitter, Slack or Stackoverflow is thanks to our awesome awesome community members, who give up some of their time to help their peers. If you want to join our community, just start pitching in. We take pride in being a welcoming bunch.

Thank you!

-- Justin Case The Backpack Robot

[karandatwani92]

Hey @mkt-van

Sorry for the inconvenience. I have escalated the issue for the bug fix.

[NeftaliRJ]

Hi , i have the same issue

BACKPACK PACKAGE VERSIONS:

backpack/backupmanager: v5.0.2 backpack/basset: 1.3.4 backpack/crud: 6.7.12 backpack/generators: v4.0.5 backpack/logmanager: v5.0.1 backpack/newscrud: 5.1.0 backpack/permissionmanager: 7.2.1 backpack/pro: 2.2.0 backpack/theme-tabler: 1.2.10

[munjaldevelopment]

Hi @NeftaliRJ @mkt-van please make sure that you have added working "GOOGLE_PLACES_KEY" in your .env file. Let us know if this helps.

[mkt-van]

@munjaldevelopment

I did that, I even tried using the API key directly on the code but still the same.

[karandatwani92]

@mkt-van,

Just to re-confirm, it is working for you in local env, right? That should mean the API key is fine.

[mkt-van]

Yes, there is no issue with API key.

[NeftaliRJ]

Hi, yes, my API works fine locally, but not in production. Currently, I can't see any new errors in the console. As I mentioned, it works fine locally with the same API key. I configured the API key without restrictions to test, but it still returns the same error.

[mkt-van]

@munjaldevelopment @karandatwani92

Hello, any update? When can we expect to be released for the fix? We need it for all our projects.

Thanks

[munjaldevelopment]

Hi @mkt-van - Please share your screenshot of error so our team can check & find best possible solution.

[pxpm]

Hey guys, thank you all for the effort. 🙏

We have identified the issue and are already testing the solution for it.

I will ping you here with further instructions on how to get the fixed version 🙏

[pxpm]

Hey everyone.

This has been fixed. Please run a composer update to get the fixed versions.

Basset: 1.3.5 - the issue causer Pro: 2.2.7 - has an updated loading script for maps scripts

Please don't forget to clear all the caches with: php artisan optimize:clear && php artisan basset:clear.

Let us know if you are still experiencing issues.

Cheers

[NeftaliRJ]

Hi @pxpm ,

Thank you for the update. I ran the composer update but encountered an issue with the availability of backpack/pro version 2.2.7.

Problem 1
    - Root composer.json requires backpack/pro 2.2.7, found backpack/pro[2.2.6, 2.2.5] but it does not match the constraint.
  Problem 2
    - backpack/newscrud is locked to version v5.0.0 and an update of this package was not requested.
    - backpack/newscrud v5.0.0 requires backpack/pro ^2.0 -> found backpack/pro[2.0.0, ..., 2.2.6] but it conflicts with your root composer.json require (2.2.7).

I checked the available versions using the command composer show backpack/pro --all and only the following versions are listed:

versions : 2.2.6, 2.2.5 ....

Could you please let me know when version 2.2.7 will be released?

Thank you for your assistance.

Best regards, Neftali

[adrsudmuntenia]

Hi @pxpm ! After last update of backpack/basset (1.3.4 => 1.3.5) and backpack/pro (2.2.6 => 2.2.7), google_map field don't show map pin anymore and places cannot be searched (local & production). In console errors are:

TypeError: google.maps.LatLng is not a constructor
    at bpFieldInitGoogleMapElement (create:1822:34)
    at HTMLInputElement.<anonymous> (create:2196:31)
    at Function.each (jquery.min.js?70f0ae6e2785:2:3003)
    at S.fn.init.each (jquery.min.js?70f0ae6e2785:2:1481)
    at initializeFieldsWithJavascript (create:2191:76)
    at HTMLDocument.<anonymous> (create:2252:7)
    at e (jquery.min.js?70f0ae6e2785:2:30038)
    at t (jquery.min.js?70f0ae6e2785:2:30340)
create:1928 TypeError: Cannot read properties of undefined (reading 'AdvancedMarkerElement')
    at bpFieldInitGoogleMapElement (create:1867:49)
    at HTMLInputElement.<anonymous> (create:1959:41)
    at Function.each (jquery.min.js?70f0ae6e2785:2:3003)
    at S.fn.init.each (jquery.min.js?70f0ae6e2785:2:1481)
    at initGoogleAddressAutocomplete (create:1954:44)
    at main.js:213:509
    at main.js:213:21

Could you resolve this issue, please! Thank you for your support!

Best regards, Ionut

[pxpm]

@adrsudmuntenia it's possible that you didn't clear the caches ?

Make sure your google script is updated and using ...&libraries=places,marker... on the url.

The old marker api was deprecated, this is the new api, but you have to include it when loading the script.

I've just re-tested everything and it seems to be working as expected:

Your payload to load the google script should be something like this:

Let me know if you are still experiencing issues.

Cheers

[pxpm]

Hi @pxpm ,

Thank you for the update. I ran the composer update but encountered an issue with the availability of backpack/pro version 2.2.7.

Problem 1
    - Root composer.json requires backpack/pro 2.2.7, found backpack/pro[2.2.6, 2.2.5] but it does not match the constraint.
  Problem 2
    - backpack/newscrud is locked to version v5.0.0 and an update of this package was not requested.
    - backpack/newscrud v5.0.0 requires backpack/pro ^2.0 -> found backpack/pro[2.0.0, ..., 2.2.6] but it conflicts with your root composer.json require (2.2.7).

I checked the available versions using the command composer show backpack/pro --all and only the following versions are listed:

versions : 2.2.6, 2.2.5 ....

Could you please let me know when version 2.2.7 will be released?

Thank you for your assistance.

Best regards, Neftali

It should now be available. Sorry I forgot to mention, we have an automated script that pick the changes and release the versions. It took a bit more this time to run.

Let me know if you are still experiencing issues. 🙏

Cheers

[adrsudmuntenia]

Hi @pxpm! Thanks for quick response! All caches are cleared and payload is:

v: 3
key: xxxxxxxxx
loading: async
libraries: places, marker
callback: initGoogleAddressAutocomplete
language: ro

but field not working.

UPDATE: I think there is a space in payload between places and marker: ... places,%20marker... After delete this space in google_map.blade.php, on development server, search box working good, pin is displayed but cannot be moved. After search and select, in console the error is now TypeError: marker.setPosition is not a function

[NeftaliRJ]

yes, same issue

[pxpm]

Hi @pxpm! Thanks for quick response! All caches are cleared and payload is:

v: 3
key: xxxxxxxxx
loading: async
libraries: places, marker
callback: initGoogleAddressAutocomplete
language: ro

but field not working.

UPDATE: I think there is a space in payload between places and marker: ... places,%20marker... After delete this space in google_map.blade.php, on development server, search box working good, pin is displayed but cannot be moved. After search and select, in console the error is now TypeError: marker.setPosition is not a function

Thanks, will investigate the issue 👍

[pxpm]

Thanks for the feedback @NeftaliRJ and @adrsudmuntenia

I've just tagged 2.2.8 of backpack/pro. It should take a bit for our private repository to pick it up, but it will be available soon with a composer update.

Let me know if you experience other issue after the update. Don't forget to clear the caches php artisan basset:clear && php artisan optimize:clear.

Cheers

[adrsudmuntenia]

Hi @pxpm! Works like a charm! Thank you for your effort!

Best regards, Ionuț