Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
98 views
in Technique[技术] by (71.8m points)

javascript - Google map is not loading properly after initialization

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="[{&quot;featureType&quot;:&quot;all&quot;,&quot;elementType&quot;:&quot;geometry&quot;,&quot;stylers&quot;:[{&quot;color&quot;:&quot;#242f3e&quot;}]},{&quot;featureType&quot;:&quot;all&quot;,&quot;elementType&quot;:&quot;labels.text.fill&quot;,&quot;stylers&quot;:[{&quot;color&quot;:&quot;#746855&quot;}]},{&quot;featureType&quot;:&quot;all&quot;,&quot;elementType&quot;:&quot;labels.text.stroke&quot;,&quot;stylers&quot;:[{&quot;color&quot;:&quot;#242f3e&quot;}]},{&quot;featureType&quot;:&quot;administrative.locality&quot;,&quot;elementType&quot;:&quot;labels.text.fill&quot;,&quot;stylers&quot;:[{&quot;color&quot;:&quot;#d59563&quot;}]},{&quot;featureType&quot;:&quot;poi&quot;,&quot;elementType&quot;:&quot;labels.text.fill&quot;,&quot;stylers&quot;:[{&quot;color&quot;:&quot;#d59563&quot;}]},{&quot;featureType&quot;:&quot;poi.park&quot;,&quot;elementType&quot;:&quot;geometry&quot;,&quot;stylers&quot;:[{&quot;color&quot;:&quot;#263c3f&quot;}]},{&quot;featureType&quot;:&quot;poi.park&quot;,&quot;elementType&quot;:&quot;labels.text.fill&quot;,&quot;stylers&quot;:[{&quot;color&quot;:&quot;#6b9a76&quot;}]},{&quot;featureType&quot;:&quot;road&quot;,&quot;elementType&quot;:&quot;geometry&quot;,&quot;stylers&quot;:[{&quot;color&quot;:&quot;#38414e&quot;}]},{&quot;featureType&quot;:&quot;road&quot;,&quot;elementType&quot;:&quot;geometry.stroke&quot;,&quot;stylers&quot;:[{&quot;color&quot;:&quot;#212a37&quot;}]},{&quot;featureType&quot;:&quot;road&quot;,&quot;elementType&quot;:&quot;labels.text.fill&quot;,&quot;stylers&quot;:[{&quot;color&quot;:&quot;#9ca5b3&quot;}]},{&quot;featureType&quot;:&quot;road.highway&quot;,&quot;elementType&quot;:&quot;geometry&quot;,&quot;stylers&quot;:[{&quot;color&quot;:&quot;#746855&quot;}]},{&quot;featureType&quot;:&quot;road.highway&quot;,&quot;elementType&quot;:&quot;geometry.stroke&quot;,&quot;stylers&quot;:[{&quot;color&quot;:&quot;#1f2835&quot;}]},{&quot;featureType&quot;:&quot;road.highway&quot;,&quot;elementType&quot;:&quot;labels.text.fill&quot;,&quot;stylers&quot;:[{&quot;color&quot;:&quot;#f3d19c&quot;}]},{&quot;featureType&quot;:&quot;transit&quot;,&quot;elementType&quot;:&quot;geometry&quot;,&quot;stylers&quot;:[{&quot;color&quot;:&quot;#2f3948&quot;}]},{&quot;featureType&quot;:&quot;transit.station&quot;,&quot;elementType&quot;:&quot;labels.text.fill&quot;,&quot;stylers&quot;:[{&quot;color&quot;:&quot;#d59563&quot;}]},{&quot;featureType&quot;:&quot;water&quot;,&quot;elementType&quot;:&quot;geometry&quot;,&quot;stylers&quot;:[{&quot;color&quot;:&quot;#17263c&quot;}]},{&quot;featureType&quot;:&quot;water&quot;,&quot;elementType&quot;:&quot;labels.text.fill&quot;,&quot;stylers&quot;:[{&quot;color&quot;:&quot;#515c6d&quot;}]},{&quot;featureType&quot;:&quot;water&quot;,&quot;elementType&quot;:&quot;labels.text.stroke&quot;,&quot;stylers&quot;:[{&quot;color&quot;:&quot;#17263c&quot;}]}]" 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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)
Waitting for answers

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...