I've made a content template in Toolset to show off a post type showing for self-help groups across Norway, and wanted to have a map on the same page so that visitors can see the locations where there are groups.
I'm reaching out because I can't make the map work. So far:
- I've got an API key enabled for Maps JavaScript API, Geocoding API, and Places API
- I've checked the Google billing account which should work fine
- I've not restricted the API on google
- I've inserted the API key into toolset maps settings
- I've got an address field on all of the relevant post types
- I've inserted the map outside the 'views' area on the blocks builder for the template
- When I edit the page with toolset, it says 'The page can't load google maps correctly', and when I click on the map it says 'Something went wrong with the block, so it can not be previewed'.
- When I look at the map front-end, it does show a generic map - but without any of the markers, which is because I can't open the settings to add it.
- I've tried enabling legacy (in case this was the issue, given that I wanted to retrieve the markers from the view) but it didn't make a difference
- I've also tried the different bootstrap settings, but that doesn't seem to matter either
I'm using Divi theme and and a the SeedProf maintenance screen, but have no other plugins I think interferes. Any other ideas for troubleshooting?
I have changed the file, but the issue remains. To clarify, I don't even get to the point where I am able to change the marker source of the map - it fails before then so that I am unable to change any of the settings.
I think my issue is different, the problem with the map block doesn't appear when I choose the marker source - I don't even manage to open up the map settings since it fails immediately after I add it, so I've never had a chance to edit where the map should retrieve the marker.
I've changed the file nevertheless to test, but the issue remains. Any other ideas of what might be going on? 🙂
Hello there! If you don't mind, I'll continue with you on this ticket.
I checked the page where the view is built, and there is an error that is triggered as soon as we select the map, and I believe it is the one behind the error message. Check this screenshot hidden link
react-dom.min.js?ver=16.13.1:125 TypeError: Cannot read property 'AutocompleteService' of undefined
at t.componentDidMount (map.block.editor.js?ver=2.0.9:1)
at oj (react-dom.min.js?ver=16.13.1:127)
at Aj (react-dom.min.js?ver=16.13.1:160)
at unstable_runWithPriority (react.min.js?ver=16.13.1:25)
at Da (react-dom.min.js?ver=16.13.1:60)
at ab (react-dom.min.js?ver=16.13.1:154)
at Te (react-dom.min.js?ver=16.13.1:146)
at react-dom.min.js?ver=16.13.1:61
at unstable_runWithPriority (react.min.js?ver=16.13.1:25)
at Da (react-dom.min.js?ver=16.13.1:60)
To better understand this issue, we might need to get a copy of your website and analyze it locally. Would you allow me to take the copy?
In the meantime, I was able to create a map and add markers to it using shortcodes inside of "Fields&Text" blocks. Check this screenshot hidden link
Keep in mind that the marker shortcode should point to the correct map ID.
Read more about the Toolset Maps shortcodes here https://toolset.com/documentation/programmer-reference/maps/maps-shortcodes/
Happy for you to make a copy and analyse it, it would be great to get it working. I've had the same issue on two other sites in the past and gave up using it. Perhaps it has something to do with Divi? Do you need FTP details to analyse the files?
I took the copy and debugged it locally, and it turns out that the issue is caused by the Google Maps' script that the Divi theme uses. After deactivating it in Divi options, the issue was not reproduced anymore. Check this screenshot hidden link
I did not use the Map block on the view yet. I just confirmed that the issue is fixed, and I kept the workaround that I have already added. I'll let you do it and let me know if you need any further assistance.
