I'm working with Google Maps JavaScript API on a webpage with a long content section. The map is located below the fold, meaning it's not initially visible when the page loads. I've noticed that the idle and projection_changed events are not triggered until the user scrolls down and the map container becomes visible in the viewport.
Question: Is it possible to modify this behavior and have the events fire even before the map is scrolled into view, essentially forcing the map to load completely upon page load?
Any help will be appreciated!
Here in Fiddle, I am trying to emulate a very long page with a bunch of h3 on top and a map after that:
https://jsfiddle.net/grj1smxd/2/
<!doctype html>
<!--
@license
Copyright 2019 Google LLC. All Rights Reserved.
SPDX-License-Identifier: Apache-2.0
-->
<html>
<head>
<title>Add Map</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<h3>My Google Maps Demo</h3>
<h3>My Google Maps Demo</h3>
<h3>My Google Maps Demo</h3>
<h3>My Google Maps Demo</h3>
<h3>My Google Maps Demo</h3>
<h3>My Google Maps Demo</h3>
<h3>My Google Maps Demo</h3>
<h3>My Google Maps Demo</h3>
<h3>My Google Maps Demo</h3>
<h3>My Google Maps Demo</h3>
<h3>My Google Maps Demo</h3>
<h3>My Google Maps Demo</h3>
<h3>My Google Maps Demo</h3>
<h3>My Google Maps Demo</h3>
<h3>My Google Maps Demo</h3>
<h3>My Google Maps Demo</h3>
<h3>My Google Maps Demo</h3>
<h3>My Google Maps Demo</h3>
<h3>My Google Maps Demo</h3>
<h3>My Google Maps Demo</h3>
<h3>My Google Maps Demo</h3>
<h3>My Google Maps Demo</h3>
<h3>My Google Maps Demo</h3>
<h3>My Google Maps Demo</h3>
<h3>My Google Maps Demo</h3>
<h3>My Google Maps Demo</h3>
<h3>My Google Maps Demo</h3>
<h3>My Google Maps Demo</h3>
<h3>My Google Maps Demo</h3>
<h3>My Google Maps Demo</h3>
<h3>My Google Maps Demo</h3>
<h3>My Google Maps Demo</h3>
<h3>My Google Maps Demo</h3>
<h3>My Google Maps Demo</h3>
<h3>My Google Maps Demo</h3>
<h3>My Google Maps Demo</h3>
<h3>My Google Maps Demo</h3>
<h3>My Google Maps Demo</h3>
<h3>My Google Maps Demo</h3>
<h3>My Google Maps Demo</h3>
<h3>My Google Maps Demo</h3>
<h3>My Google Maps Demo</h3>
<h3>My Google Maps Demo</h3>
<h3>My Google Maps Demo</h3>
<h3>My Google Maps Demo</h3>
<h3>My Google Maps Demo</h3>
<h3>My Google Maps Demo</h3>
<h3>My Google Maps Demo</h3>
<!--The div element for the map -->
<div id="map"></div>
<!-- prettier-ignore -->
<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: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script>
</body>
</html>
/**
* @license
* Copyright 2019 Google LLC. All Rights Reserved.
* SPDX-License-Identifier: Apache-2.0
*/
// Initialize and add the map
let map;
async function initMap() {
// The location of Uluru
const position = { lat: -25.344, lng: 131.031 };
// Request needed libraries.
//@ts-ignore
const { Map } = await google.maps.importLibrary("maps");
const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
// The map, centered at Uluru
map = new Map(document.getElementById("map"), {
zoom: 4,
center: position,
mapId: "DEMO_MAP_ID",
});
// The marker, positioned at Uluru
const marker = new AdvancedMarkerElement({
map: map,
position: position,
title: "Uluru",
});
map.addListener("idle", () => {
console.log('map idel')
});
map.addListener("projection_changed", () => {
console.log('projection cahnged');
});
}
initMap();
I am expecting to tirgger 'projection_changed'(or 'idle') event on page load.
I am posting this as an answer because I have no privilege to comment yet.
You said "The section with the Google map is not shown in the viewport when the page loads, but one must scroll to see it.", I have checked your Jsfiddle and tried to remove your bunch of
h3and the map is loaded and shown immediately without scrolling down.Your listeners
idleandprojection_changedwere also triggered.