Support » Plugin: LiteSpeed Cache » Google Maps API embed throws error- because of cached auth param?

Google Maps API embed throws error- because of cached auth param?

  • Resolved lijndiensten

    (@lijndiensten)


    11 months, 3 weeks ago

    Hi,

    We are seeing a JS error on that indicates the Google Maps script is not loaded from the correct URL.

    On the page:

    Oops! Something went wrong.
This page didn't load Google Maps correctly. See the JavaScript console for technical details.

    In the console:

    c3410.js?81a11:sourcemap:46 Google Maps JavaScript API error: NotLoadingAPIFromGoogleMapsError
https://developers.google.com/maps/documentation/javascript/error-messages#not-loading-api-from-google-maps-error
_.Qe @ c3410.js?81a11:sourcemap:46

    I think it can be caused by caching, as described here: https://stackoverflow.com/questions/61092932/notloadingapifromgooglemapserror-occurring-randomly-with-google-maps-javascript. The problem is solved – for about a day – when the Lightspeed cache is cleared. When I exclude the whole page from caching, the issue is solved (but the page becomes extremely slow).

    Do you think the hypothesis is correct, and then, how to solve?

    Thanks already,
    Ivan

Viewing 11 replies - 1 through 11 (of 11 total)
  • Plugin Support qtwrk

    (@qtwrk)

    11 months, 3 weeks ago

    Hi,

    please provide the report number

    you can get it in toolbox -> report -> click “send to LiteSpeed”

    Best regards,

    Thread Starter lijndiensten

    (@lijndiensten)

    11 months, 3 weeks ago

    Hi, that would be UGEXTJVH.

    Plugin Support qtwrk

    (@qtwrk)

    11 months, 3 weeks ago

    Hi,

    The problem is solved – for about a day – when the Lightspeed cache is cleared. When I exclude the whole page from caching, the issue is solved

    okay , so please confirm :

    1. if the page is exclude from caching , it works all the time

    2. if you enable cache , and it will work for about a day or so then it breaks ?

    if 2) is true , when it breaks , if you purge all , will it work again (for a day or so )?

    may I have a page URI where you have the map or see the error in dev tool console ?

    you can just post the URI part after domain.

    Best regards,

    Thread Starter lijndiensten

    (@lijndiensten)

    11 months, 3 weeks ago

    1. Correct
    2. Correct
    2 sub. Correct, purging all solves the issue temporarily.

    The URI: /pad-van-je-eigen-wijsheid/route/

    Thanks, Ivan

    Plugin Support qtwrk

    (@qtwrk)

    11 months, 3 weeks ago

    Hi,

    please try add maps in Page optimization -> tune setting -> JS exclude , then purge all

    see if it helps

    and how was the map added ? like a plugin or custom code or something ?

    Best regards,

    Thread Starter lijndiensten

    (@lijndiensten)

    11 months, 3 weeks ago

    Thanks, I added the settings per your suggestion and will keep an eye out the coming days.

    The map was embedded using the Maps JS API.

    Thanks,
    Ivan

    Plugin Support qtwrk

    (@qtwrk)

    11 months, 3 weeks ago

    Hi,

    I mean , how did you embed it into your WP ?

    like use a plugin to inject the code ?

    yourself modified some php files to inject it ?

    or something ?

    Best regards,

    Thread Starter lijndiensten

    (@lijndiensten)

    11 months, 3 weeks ago

    We place a block of code directly in the page, somewhat like this:

    <style>
#map {
  height: 750px;
  width: 100%;
  overflow: hidden;
  border: none;
}
</style>
<div id="map"></div>
<script>
const mq = window.matchMedia( "(max-width: 600px)" );
var map;
var src = 'https://example.com/map.kml';

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(51.00000, 5.00000),
    zoom: 12,
    mapTypeId: 'roadmap',
    disableDefaultUI: true,
    styles: [
    {"featureType": "road","elementType": "labels","stylers": [{"visibility": "off"}]},
    {"featureType": "administrative.neighborhood","elementType": "all","stylers": [{"visibility": "off"}]},
    {"featureType": "road.highway","elementType": "all","stylers": [{"visibility": "off"}]},
    {"featureType": "poi","elementType": "all","stylers": [{"visibility": "off"}]}
    ]
  });

  var kmlLayer = new google.maps.KmlLayer(src, {
    suppressInfoWindows: true,
    preserveViewport: true,
    map: map
  });
}
</script>
<script async src="https://maps.googleapis.com/maps/api/js?key=abc123&callback=initMap">
</script>
    Plugin Support qtwrk

    (@qtwrk)

    11 months, 3 weeks ago

    Hi,

    okay , did exclude “maps” in JS works for you ?

    if not, try use “map” in single instead of plural

    Best regards,

    Thread Starter lijndiensten

    (@lijndiensten)

    11 months, 3 weeks ago

    I added “maps” and have checked a couple of times: no errors thus far. I will keep an eye on it, but let’s assume it is fixed. Thanks a lot for the effective and quick support!

    Plugin Support qtwrk

    (@qtwrk)

    11 months, 3 weeks ago

    cool , please keep us posted : )

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Google Maps API embed throws error- because of cached auth param?’ is closed to new replies.

Topic Tags

Views