Javascript 加载脚本并仅在需要时执行

我需要查找页面中是否有class=“map”的div

如果有，并且只有在这种情况下，加载谷歌地图API

然后使用lat和long值的数据属性将地图加载到DIV中

因此，我有以下几点：

<div class="map" data-long="51.5072" data-lat="0.1275">
  Replace by map 1
</div>

<div class="map" data-long="74.0059" data-lat="40.7127">
  Replace by map 2
</div>

我想应用于每个地图的代码如下：

函数初始化（）{
var map_canvas=document.getElementById（'map_canvas'）；
变量映射_选项={
中心：新google.maps.LatLng（44.5403，-78.5463），
缩放：8，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
var map=new google.maps.map（地图画布，地图选项）
}
google.maps.event.addDomListener（窗口“加载”，初始化）；

谢谢,，

---

Miguel

请参阅异步加载Google Maps API的解决方案：

那么就这样做：

$(document).ready(function(){
    function initialize(){
        var map_canvas = document.getElementById('map_canvas');
        var map_options = {
            center: new google.maps.LatLng(44.5403, -78.5463),
            zoom: 8,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(map_canvas, map_options)
    }
    $(window).bind('gMapsLoaded', initialize);

    if($('.map').length){
        window.loadGoogleMaps();
    }
});

---

if（$（'.map'）.length>0）{code here}

为什么不使用$.getScript和Google Loader？它在加载多个脚本时可能有用。。。没有？如果你能听到每个脚本的特定事件，我看不出你不应该使用它的原因。我从来没有试过。看起来不错！有趣的部分是

if（$（'.map'）.length）

条件

  function initialize() {
    var map_canvas = document.getElementById('map_canvas');
    var map_options = {
      center: new google.maps.LatLng(44.5403, -78.5463),
      zoom: 8,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(map_canvas, map_options)
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>

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);
}

$(document).ready(function(){
    function initialize(){
        var map_canvas = document.getElementById('map_canvas');
        var map_options = {
            center: new google.maps.LatLng(44.5403, -78.5463),
            zoom: 8,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(map_canvas, map_options)
    }
    $(window).bind('gMapsLoaded', initialize);

    if($('.map').length){
        window.loadGoogleMaps();
    }
});