Google Maps is an essential tool for web developers, offering a wide range of features through its JavaScript API. While the official documentation provides a recommended setup, developers might encounter issues, especially when it comes to tile loading during zoom or drag operations. In this blog post, we'll explore a common problem and provide a solution to the GetViewportinfo error.
The Challenge: Tiles Not Loading on Zoom and Drag
One of the frustrating issues developers may face when implementing Google Maps using the recommended setup is the failure of tiles to load properly. This problem often manifests as a GetViewportinfo error, indicating an issue with retrieving viewport information during map interactions.
The Solution: Hard Setting the Version Number
A potential remedy to the tile loading issue is to hard set the version number for the Google Maps JavaScript API. In the provided JavaScript code snippet, the critical adjustment is the introduction of the v parameter with the specified version number.
<script>
(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
key: "",
v: "3.53", // THIS VERSION NUMBER
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
In this snippet, pay attention to the v parameter within the configuration. The version number is explicitly set to "3.53". Adjust this version number based on your testing to find the one that resolves the tile loading issues in your specific case.
Conclusion
While implementing Google Maps using the recommended setup from the documentation, encountering issues like