I have initialized Google Map following way
const {
LatLng,
Marker,
Map,
} = window.google.maps;
$(document).ready(function() {
[ ...document.querySelectorAll( '.custom-google-maps-google-map-wrapper:not( .custom-google-maps-ready )' ) ].forEach( el => initGoogleMap( el ) );
});
function initGoogleMap( el ) {
el.classList.add( 'custom-google-maps-ready' );
const marker = extractMarkerPositionIfAny( el );
const map = new Map( el, extractMapOptions( el ) );
if ( marker ) {
new Marker( { map, clickable: false, position: new LatLng( marker.lat, marker.lng ) } );
}//end if
}//end initGoogleMap()
function extractMapOptions( el ) {
const lat = parseFloat( el.getAttribute( 'data-lat' ) );
const lng = parseFloat( el.getAttribute( 'data-lng' ) );
const isDraggable = 'true' === el.getAttribute( 'data-is-draggable' );
const showZoomButtons = 'true' === el.getAttribute( 'data-show-zoom-buttons' );
const showMapTypeButton = 'true' === el.getAttribute( 'data-show-map-type-button' );
const showFullscreenButton = 'true' === el.getAttribute( 'data-show-fullscreen-button' );
let styles = '';
try {
styles = JSON.parse( el.getAttribute( 'data-styles' ) );
} catch ( e ) { }
return {
center: new LatLng( lat, lng ),
draggableCursor: ! isDraggable ? 'default' : undefined,
fullscreenControl: showFullscreenButton,
gestureHandling: isDraggable ? 'cooperative' : 'none',
mapTypeControl: showMapTypeButton,
streetViewControl: false,
styles: styles,
zoom: parseInt( el.getAttribute( 'data-zoom' ), 10 ),
zoomControl: showZoomButtons,
};
}//end extractMapOptions()
function extractMarkerPositionIfAny( el ) {
const marker = el.querySelector( '.marker' );
if ( ! marker ) {
return false;
}//end if
const lat = marker.getAttribute( 'data-lat' ) || false;
const lng = marker.getAttribute( 'data-lng' ) || false;
if ( ! lat || ! lng ) {
return false;
}//end if
return { lat, lng };
}//end extractMarkerPositionIfAny()
And my .custom-google-maps-google-map-wrapper get render dynamically from Gutenberg before the above JS loads. And here is how my .custom-google-maps-google-map-wrapper:
<div id="mapDiv" class="custom-google-maps-google-map-wrapper" style="min-height:30vh;margin:0 auto;max-width:1200px" data-styles="" data-is-draggable="false" data-show-fullscreen-button="false" data-show-map-type-button="false" data-show-zoom-buttons="false" data-lat="41.3947688" data-lng="2.0787284" data-zoom="8"></div>
<div id="mapDiv" class="custom-google-maps-google-map-wrapper" style="min-height:30vh;margin:0 auto;max-width:1200px" data-styles="[{"featureType":"all","elementType":"geometry","stylers":[{"color":"#242f3e"}]},{"featureType":"all","elementType":"labels.text.fill","stylers":[{"color":"#746855"}]},{"featureType":"all","elementType":"labels.text.stroke","stylers":[{"color":"#242f3e"}]},{"featureType":"administrative.locality","elementType":"labels.text.fill","stylers":[{"color":"#d59563"}]},{"featureType":"poi","elementType":"labels.text.fill","stylers":[{"color":"#d59563"}]},{"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#263c3f"}]},{"featureType":"poi.park","elementType":"labels.text.fill","stylers":[{"color":"#6b9a76"}]},{"featureType":"road","elementType":"geometry","stylers":[{"color":"#38414e"}]},{"featureType":"road","elementType":"geometry.stroke","stylers":[{"color":"#212a37"}]},{"featureType":"road","elementType":"labels.text.fill","stylers":[{"color":"#9ca5b3"}]},{"featureType":"road.highway","elementType":"geometry","stylers":[{"color":"#746855"}]},{"featureType":"road.highway","elementType":"geometry.stroke","stylers":[{"color":"#1f2835"}]},{"featureType":"road.highway","elementType":"labels.text.fill","stylers":[{"color":"#f3d19c"}]},{"featureType":"transit","elementType":"geometry","stylers":[{"color":"#2f3948"}]},{"featureType":"transit.station","elementType":"labels.text.fill","stylers":[{"color":"#d59563"}]},{"featureType":"water","elementType":"geometry","stylers":[{"color":"#17263c"}]},{"featureType":"water","elementType":"labels.text.fill","stylers":[{"color":"#515c6d"}]},{"featureType":"water","elementType":"labels.text.stroke","stylers":[{"color":"#17263c"}]}]" data-is-draggable="true" data-show-fullscreen-button="false" data-show-map-type-button="false" data-show-zoom-buttons="false" data-lat="41.3947688" data-lng="2.0787284" data-zoom="7"></div>
And here is my google map script which renders before the above js
<script src='https://maps.googleapis.com/maps/api/js?key=API_KEY;libraries=geometry,drawing,places' id='google-maps-js'></script>
And I am getting the following error -> Please see the screenshot for error
Please help me out.
question from:
https://stackoverflow.com/questions/65901549/google-map-is-not-loading-properly-after-initialization 
