多個谷歌地圖

我目前有3個獨立的谷歌地圖正在使用JavaScript API加載到我的網頁上，並且它們需要好幾秒鐘才能加載，這會使頁面呈現非活動狀態，直到它們完成。多個谷歌地圖

有沒有人對我能做些什麼改變這個建議？目前速度很慢，我不知道如何解決這個問題。

謝謝！

function googlemap() { 

    // map pin 
    var companyImage = new google.maps.MarkerImage('http://urlgoeshere.co.uk/images/home/map_pin.png', 
     new google.maps.Size(100,60), 
     new google.maps.Point(0,0), 
     new google.maps.Point(21,65) 
    ); 

    // map pin shadow 
    var companyShadow = new google.maps.MarkerImage('http://urlgoeshere.co.uk/images/home/map_shadow.png', 
     new google.maps.Size(120,60), 
     new google.maps.Point(0,0), 
     new google.maps.Point(23,23) 
    ); 

    // map one 
    var onePos = new google.maps.LatLng(44.374411, -1.088402); 
    var oneSettings = { 
     zoom: 15, 
     center: onePos, 
     scrollwheel: false, 
     mapTypeControl: false, 
     zoomControl: true, 
     zoomControlOptions: { 
      style: google.maps.ZoomControlStyle.SMALL, 
      position: google.maps.ControlPosition.BOTTOM_CENTER 
     }, 
     panControl: false, 
     streetViewControl: true, 
     streetViewControlOptions: { 
      position: google.maps.ControlPosition.BOTTOM_CENTER 
     }, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    var oneMap = new google.maps.Map(document.getElementById("one_map"), oneSettings); 
    var oneMarker = new google.maps.Marker({ 
     position: onePos, 
     map: oneMap, 
     icon: companyImage, 
     shadow: companyShadow, 
     zIndex: 3 
    }); 

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


    // two 
    var twoPos = new google.maps.LatLng(42.349055,4.110803); 
    var twoSettings = { 
     zoom: 15, 
     center: twoPos, 
     scrollwheel: false, 
     mapTypeControl: false, 
     zoomControl: true, 
     zoomControlOptions: { 
      style: google.maps.ZoomControlStyle.SMALL, 
      position: google.maps.ControlPosition.BOTTOM_CENTER 
     }, 
     panControl: false, 
     streetViewControl: true, 
     streetViewControlOptions: { 
      position: google.maps.ControlPosition.BOTTOM_CENTER 
     }, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    var twoMap = new google.maps.Map(document.getElementById("two_map"), twoSettings); 
    var twoMarker = new google.maps.Marker({ 
     position: twoPos, 
     map: twoMap, 
     icon: companyImage, 
     shadow: companyShadow, 
     zIndex: 3 
    }); 

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

    // three 
    var threePos = new google.maps.LatLng(32.377624,-0.523466); 
    var threeSettings = { 
     zoom: 15, 
     center: threePos, 
     scrollwheel: false, 
     mapTypeControl: false, 
     zoomControl: true, 
     zoomControlOptions: { 
      style: google.maps.ZoomControlStyle.SMALL, 
      position: google.maps.ControlPosition.BOTTOM_CENTER 
     }, 
     panControl: false, 
     streetViewControl: true, 
     streetViewControlOptions: { 
      position: google.maps.ControlPosition.BOTTOM_CENTER 
     }, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    var threeMap = new google.maps.Map(document.getElementById("three_map"), threeSettings); 
    var threeMarker = new google.maps.Marker({ 
     position: threePos, 
     map: threeMap, 
     icon: companyImage, 
     shadow: companyShadow, 
     zIndex: 3 
    }); 

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

和我的HTML

<div id="one_map"></div> 
    <div id="two_map"></div> 
    <div id="three_map"></div>

來源

2012-07-18 green_arrow

看不到你在做什麼，很難推薦改進。 – geocodezip 2012-07-18 14:03:26

我建議在爲每一個功能，打破了你的函數映射你創建（或一個動態的，可以做基於參數的工作），然後在每一個結束時，使用setTimeout呼叫執行下一個呼叫，延遲爲0，或者延遲很小。然後，當您退出該功能時，您可以給UI提供更新而無需等待整個任務完成。雖然實際上並沒有讓你的頁面更快，但它使它感覺更快，響應更快。也可能有其他改進，但這種簡單的改變通常會產生巨大的差異。

來源

2012-07-18 14:13:25 Thor84no