多个谷歌地图

我目前有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