0

私のページの 1 つの jQuery プラグインで Google マップを呼び出していますが、タブ div にマップ全体をロードしていません。解決策はAjaxだと思います。私はGoogleで言うように試しましたが、うまくいかないようです。

よろしくお願いします...

function initializeMap(address) {

 var mapVar = {
    latitude: "",
    longitude: "",
    myLatlng: ""
 };

var geocoder = new google.maps.Geocoder();

geocoder.geocode({ 'address': address }, function (results, status) {

    if (status == google.maps.GeocoderStatus.OK) {

        mapVar.latitude = results[0].geometry.location.lat();
        mapVar.longitude = results[0].geometry.location.lng();

        mapVar.myLatlng = new google.maps.LatLng(mapVar.latitude, mapVar.longitude);

        //-----define map options---//
        var mapOptions = {
            center: mapVar.myLatlng,
            zoom: 15,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

        var marker = new google.maps.Marker({
            position: mapVar.myLatlng,
            map: map,
            title: address
        });

    } //end if 
   });
}

html

   <div id="map_canvas" style="width:61.4em; height:400px;"></div>

CSS

 #map_canvas { 
 width:61.4em;
 height: 100%;
}
4

1 に答える 1

1

この問題の解決策は、window.onloadイベント/関数呼び出しに応答してスクリプトタグを挿入することにより、ページの読み込みが完了した後にオンデマンドで非同期にロードマップすることです。私のマップはjqueryタブに表示されているので、タブでイベントを登録しています。そのため、特定のタブをクリックすると... document.ready の map-Load 関数がプラグインで呼び出され、その後に実際のマップ要求データを保持する初期化関数が続きます。

jQuery プラグイン

  $.fn.loadGoogleMap = function () {

    var script_tag = document.createElement('script');

    script_tag.type = 'text/javascript';

    script_tag.src = "https://maps.googleapis.com/maps/api/js?key=yourKey=false&callback=initializeMap"

    document.body.appendChild(script_tag);

}


function initializeMap() {

address = PropertyDetail.d_fullAddress;

var mapVar = {
    latitude: "",
    longitude: "",
    myLatlng: ""
};

var geocoder = new google.maps.Geocoder();

geocoder.geocode({ 'address': address }, function (results, status) {

    if (status == google.maps.GeocoderStatus.OK) {

        mapVar.latitude = results[0].geometry.location.lat();
        mapVar.longitude = results[0].geometry.location.lng();

        mapVar.myLatlng = new google.maps.LatLng(mapVar.latitude, mapVar.longitude);

        //-----define map options---//
        var mapOptions = {
            center: mapVar.myLatlng,
            zoom: 15,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

        var marker = new google.maps.Marker({
            position: mapVar.myLatlng,
            map: map,
            title: address
        });

    } //end if 
  });
 }

document.ready() でプラグイン関数を呼び出します...

 $("#map_canvas_tab").on("click", function () {

      $(this).loadGoogleMap();

      window.onload = loadScript;
  });
于 2013-06-24T15:32:25.353 に答える