,可以通过以下步骤实现:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
请将YOUR_API_KEY
替换为您自己的Google Maps API密钥。
<div id="map1" style="width: 400px; height: 300px;"></div>
<div id="map2" style="width: 400px; height: 300px;"></div>
请根据需要调整容器的宽度和高度。
function initMap() {
var map1 = new google.maps.Map(document.getElementById('map1'), {
center: {lat: 37.7749, lng: -122.4194}, // 设置地图中心点的经纬度
zoom: 12 // 设置地图缩放级别
});
var map2 = new google.maps.Map(document.getElementById('map2'), {
center: {lat: 34.0522, lng: -118.2437},
zoom: 10
});
// 在这里可以添加更多的地图初始化代码
}
// 在页面加载完成后调用初始化函数
window.onload = initMap;
在上述代码中,我们创建了两个地图,分别位于旧金山和洛杉矶,并设置了不同的中心点和缩放级别。您可以根据需要添加更多的地图初始化代码。
总结:
在一个页面中使用非顺序ID的多个Google Maps,您需要引入Google Maps API,创建多个地图容器,并使用JavaScript代码初始化每个地图。您可以根据需要自定义每个地图的选项和功能。
腾讯云相关产品推荐:
领取专属 10元无门槛券
手把手带您无忧上云