search

inocan-group / vue3-google-map

A set of composable components for easy use of Google Maps in your Vue 3 projects.
https://vue3-google-map.com
MIT License
296 stars 60 forks source link

Google maps doesnt load map graphics #155

Closed RaskaTheFurry closed 1 year ago

RaskaTheFurry commented 1 year ago

Last week on Friday we noticed, that Google maps are not getting loaded by this component, more accurately, the map tiles arent getting loaded due to CORS policy issues. We were using 0.15.0 and this happens even after updating to 0.17.0. Prior to last week, it worked even when it threw CORS policy errors.

We did find a temporary fix to this issue, which was explicitly setting Google API version to 3.52 instead of the default "weekly" or "quarterly".

It seems that there is either problem on our side or problem with the component, which is caused by new changes in Google Maps API version.

image

this is how the map looks like with the error, the controls ( dragging ) still works, it seems to recognize that, just the tiles arent getting loaded with image errors

Either way, if its an error on component's side or our side, we would appreciate any help to fix this issue so we dont have to rely on outdated API.

Edit: version 3.53 works fine as well. Problem starts with version 3.54

DoubleBiscuit commented 1 year ago

It sounds like you've encountered a CORS policy issue with Google Maps API when using version 3.54, which was not present in earlier versions like 3.52 or 3.53. CORS issues are typically related to how your web application interacts with external resources. Here are a few steps you can take to address this issue:

• Check Your CORS Configuration: Ensure that your server-side CORS configuration is correctly set up to allow requests from your web application domain. This might involve configuring the server to respond with the appropriate CORS headers.

• API Key: Verify that you're using a valid and up-to-date API key for Google Maps. Make sure the API key is correctly configured with the appropriate permissions and restrictions.

• Google Maps API Documentation: Check Google's official documentation for any changes or updates related to CORS policies in the Google Maps API. They might have introduced changes that impact how the API interacts with web applications.

• Component Updates: Keep an eye on updates for the component you're using. Newer versions might address issues related to CORS and compatibility with the latest Google Maps API versions.

• Debugging: Use browser developer tools to inspect network requests and see the specific CORS error messages. This can provide more details about the issue and help pinpoint the root cause.

• Community and Support: If the issue persists, consider reaching out to the developer community for the component you're using or seeking support from the component's maintainers. They might have encountered similar issues and can provide guidance or updates.

By following these steps, you can troubleshoot and address the CORS policy issue you're experiencing with Google Maps API and hopefully find a solution that doesn't require relying on outdated API versions.

JoseGoncalves commented 1 year ago

@RaskaTheFurry, I guess that your issue should be related with your deployment environment. Does the same issue occurs when you run your app in development mode? I don't see any CORS issue on my demo app with any of the latest Google Maps API versions.