1

現在、検索結果を表示するページがあります。ユーザーが結果をクリックすると、 ajaxを使用して詳細が取得され、ページに読み込まれます。これらの詳細には、Googleマップがあります。

以前は、詳細ページにコールバック付きのGmapsスクリプトがありました。しかし、ユーザーが複数の結果をクリックすると、Gmapsスクリプトが複数回挿入されるというこの問題に遭遇しました。

ここで、結果ページにスクリプトをロードし、詳細ページで必要なすべてのパラメーターを渡しながら初期化関数を呼び出します。しかし、undefined is not a functionエラーが発生します。

だから私の質問は：Gmapsスクリプト、コールバック、および2つのページ（結果と詳細）間のマップの非同期初期化をどのように構成するかです。

結果ページ

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&key=[key]"></script>

function initialize(params) {
var directionsService, directionsDisplay, map;  

directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer();

// your typical gmaps stuff

}

詳細ページ

<div id="map_canvas"></div>

initialize(params);
4

1 に答える 1

2

DOMに追加される「google」グローバル変数をチェックすることで、Googleマップのスクリプトがすでにロードされているかどうかを確認できます。

ここに完全なjsfiddleの例：http：//jsfiddle.net/gavinfoley/yD8Qt/。

    // dom ready
    $(function () {
        if (typeof google === "undefined") {
            alert("Lazy loading Google maps");
            lazyLoadGoogleMaps();
        } else {                
            alert("Google Maps is already loaded");
            googleMapsLoaded();
        }
    });

    function lazyLoadGoogleMaps() {
        // Note the callback function name 
        $.getScript("http://maps.google.com/maps/api/js?sensor=true&callback=googleMapsLoaded")
        .done(function (script, textStatus) {            
            alert("Google maps loaded successfully");
        })
        .fail(function (jqxhr, settings, ex) {
            alert("Could not load Google Maps: ", ex);
        });
    }

    // This function name is passed in to the Google maps script load above
    // and will be called once Google maps has loaded
    function googleMapsLoaded() {           
        alert("Done!");
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

于 2013-02-02T04:28:18.490 に答える