Javascript 如何从HTML文档中的外部JS调用/启动此函数

我有map.js，这是一个设置带有图标的谷歌地图的功能。我想知道我现在是如何把这张地图放到我的网站上的。我知道我需要调用一个函数，并以某种方式用ID标记启动它。但我不完全确定这个过程是如何运作的

外部JS map.JS代码：

function locationsMap() {
/* GEO BROCATION MAP */
// Define your locations: HTML content for the info window, latitude, longitude

if ($('#map').length > 0) {
    var locations = [
      ['<h4 class="locations-map-link"><a href="URL" target="_blank">ADDRESS</a></p>', COORDINATES],
      ['<h4 class="locations-map-link"><a href="URL" target="_blank">ADDRESS</a></p>', COORDINATES],
      ['<h4 class="locations-map-link"><a href="URL" target="_blank">ADDRESS</a></p>', COORDINATES],
      ['<h4 class="locations-map-link"><a href="URL" target="_blank">ADDRESS</a></p>', COORDINATES],
      ['<h4 class="locations-map-link"><a href="URL" target="_blank">ADDRESS</a></p>', COORDINATES],
      ['<h4 class="locations-map-link"><a href="URL" target="_blank">ADDRESS</a></p>', COORDINATES],
      ['<h4 class="locations-map-link"><a href="URL" target="_blank">ADDRESS</a></p>', COORDINATES],
      ['<h4 class="locations-map-link"><a href="URL" target="_blank">ADDRESS</a></p>', COORDINATES],
      ['<h4 class="locations-map-link"><a href="URL" target="_blank">ADDRESS</a></p>', COORDINATES],
      ['<h4 class="locations-map-link"><a href="URL" target="_blank">ADDRESS</a></p>', COORDINATES],
      ['<h4 class="locations-map-link"><a href="URL" target="_blank">ADDRESS</a></p>', COORDINATES],
      ['<h4 class="locations-map-link"><a href="URL" target="_blank">ADDRESS</a></p>', COORDINATES],
      ['<h4 class="locations-map-link"><a href="URL" target="_blank">ADDRESS</a></p>', COORDINATES],
      ['<h4 class="locations-map-link"><a href="URL" target="_blank">ADDRESS</a></p>', COORDINATES],
      ['<h4 class="locations-map-link"><a href="URL" target="_blank">ADDRESS</a></p>', COORDINATES],
      ['<h4 class="locations-map-link"><a href="URL" target="_blank">ADDRESS</a></p>', COORDINATES],
      ['<h4 class="locations-map-link"><a href="URL" target="_blank">ADDRESS</a></p>', COORDINATES],
      ['<h4 class="locations-map-link"><a href="URL" target="_blank">ADDRESS</a></p>', COORDINATES]
    ];

    // Setup the different icons and shadows
    var iconURLPrefix = 'http://www.msbcollege.edu';

    var icons = ['/wp-content/uploads/2016/02/map-icon-rebrand.png']
    var icons_length = icons.length;


    var shadow = {
        anchor: new google.maps.Point(15, 33),
        url: iconURLPrefix + 'msmarker.shadow.png'
    };

    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: new google.maps.LatLng(-37.92, 151.25),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false,
        streetViewControl: false,
        panControl: false,
        zoomControlOptions: {
            position: google.maps.ControlPosition.LEFT_BOTTOM
        }
    });

    var infowindow = new google.maps.InfoWindow({
        maxWidth: 160
    });

    var marker;
    var markers = new Array();

    var iconCounter = 0;

    // Add the markers and infowindows to the map
    for (var i = 0; i < locations.length; i++) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map,
            icon: icons[iconCounter],
            shadow: shadow
        });

        markers.push(marker);

        google.maps.event.addListener(marker, 'click', (function (marker, i) {
            return function () {
                infowindow.setContent(locations[i][0]);
                infowindow.open(map, marker);
            }
        })(marker, i));

        iconCounter++;
        // We only have a limited number of possible icon colors, so we may have to restart the counter
        if (iconCounter >= icons_length) {
            iconCounter = 0;
        }
    }

    function AutoCenter() {
        //  Create a new viewpoint bound
        var bounds = new google.maps.LatLngBounds();
        //  Go through each...
        $.each(markers, function (index, marker) {
            bounds.extend(marker.position);
        });
        //  Fit these bounds to the map
        map.fitBounds(bounds);
    }
    AutoCenter();


} else {
    //do nothing
}
});

函数位置映射（）{
/*地理区划图*/
//定义您的位置：信息窗口的HTML内容、纬度、经度
如果（$（'#映射'）。长度>0）{
变量位置=[
['
'，坐标]，
['
'，坐标]，
['
'，坐标]，
['
'，坐标]，
['
'，坐标]，
['
'，坐标]，
['
'，坐标]，
['
'，坐标]，
['
'，坐标]，
['
'，坐标]，
['
'，坐标]，
['
'，坐标]，
['
'，坐标]，
['
'，坐标]，
['
'，坐标]，
['
'，坐标]，
['
'，坐标]，
['
'，坐标]
];
//设置不同的图标和阴影
变量iconURLPrefix=http://www.msbcollege.edu';
var icons=['/wp content/uploads/2016/02/map icon rebrand.png']
var icons_length=icons.length；
变量阴影={
主播：新谷歌地图点（15,33），
url:iconURLPrefix+'msmarker.shadow.png'
};
var map=new google.maps.map（document.getElementById（'map'）{
缩放：10，
中心：新google.maps.LatLng（-37.92151.25），
mapTypeId:google.maps.mapTypeId.ROADMAP，
mapTypeControl:false，
街景控制：错误，
泛控制：错误，
ZoomControl选项：{
位置：google.maps.ControlPosition.LEFT_底部
}
});
var infowindow=new google.maps.infowindow({
最大宽度：160
});
var标记；
var markers=新数组（）；
var-iconCounter=0；
//将标记和信息窗口添加到地图
对于（变量i=0；i=图标长度）{
i计数器=0；
}
}
函数AutoCenter（）{
//创建新的视点边界
var bounds=new google.maps.LatLngBounds（）；
//通过每个。。。
$.each（标记、函数（索引、标记）{
扩展（标记位置）；
});
//将这些边界拟合到地图上
映射边界（bounds）；
}
自动中心（）；
}否则{
//无所事事
}
});

当前HTML：

<div class="col-md-4" id="exploreBox">
        <!-- <img class="img-responsive boxImage" src="https://placehold.it/150x100" /> -->
        <h3>Find a Campus</h3

        <div id="map-container">
            <div id="map"></div>
        </div>

        <!-- <div id="map"></div> -->
        <button class="btn btn-default learnMore" type="submit">GO NOW</button>
    </div>

找一个校园
走吧

您需要包含带有脚本标记的javascript文件（确保路径正确）

<script src="map.js"></script>

<script language="javascript">
        window.onload = function(){locationsMap()}
    </script>

$(document).ready(locationsMap)