0

目標

既に読み込まれている JavaScript を正しく再利用します。

問題

Google Maps API V3 を使用して動的にマップを生成していますが、それを再利用する必要があります。どのように?

シナリオ

Index.htmlに、次のスクリプトがあります。

var gMapsLoaded = false;

window.gMapsCallback = function () {
    gMapsLoaded = true;
    $(window).trigger('gMapsLoaded');
}

window.loadGoogleMaps = function () {
    if (gMapsLoaded) return window.gMapsCallback();
    var script_tag = document.createElement('script');
    script_tag.setAttribute("type", "text/javascript");
    script_tag.setAttribute("src", 
        "http://maps.google.com/maps/api/js?sensor=false&callback=gMapsCallback");
    (document.getElementsByTagName("head")[0]
     || document.documentElement).appendChild(script_tag);
}

ボタンをクリックしてマップを表示すると、アプリは次のスクリプトを呼び出します。

[...]

var geocoder;
var map;
var address = context.address();

function initialize() {
    var mapDiv = document.getElementById("map_canvas");
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
        zoom: 15,
        center: latlng,
        mapTypeControl: true,
        mapTypeControlOptions: 
           { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU },
        navigationControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(mapDiv, myOptions);

    if (geocoder) {
        geocoder.geocode({ 'address': address }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
                    map.setCenter(results[0].geometry.location);

                    var infowindow = new google.maps.InfoWindow(
                        {
                            content: '<b>' + address + '</b>',
                            size: new google.maps.Size(150, 50)
                        });

                    var marker = new google.maps.Marker({
                        position: results[0].geometry.location,
                        map: map,
                        title: address
                    });

                    google.maps.event.addListener(marker, 'click', function () {
                        infowindow.open(map, marker);
                    });

                } else {
                    alert("No results found");
                }
            } else {
                alert
                    ("Geocode was not successful 
                     for the following reason: " + status);
            }
        });
    }

    gMapsLoaded = false;
}

$(window).on('gMapsLoaded', initialize);
window.loadGoogleMaps();

ご覧のとおり、アプリケーションは常にloadGoogleMaps();外部.jsファイルを呼び出す関数を呼び出しています。5 つの異なるマップをクリックすると、同じ提案を持つ 5 つのスクリプトが表示されます。

誰かがこれを解決するアイデアを持っていますか?

質問が重複していますか?

はい、質問の本質は重複していると思いますが、核は重複していません。

4

1 に答える 1