在单个页面上使用不同id的两个Google地图,可以通过以下步骤实现:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
请将YOUR_API_KEY
替换为您自己的Google地图API密钥。如果您还没有API密钥,可以在Google Cloud控制台中创建一个。
<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: 40.7128, lng: -74.0060},
zoom: 12
});
// 在地图上添加标记等其他操作...
}
在上述代码中,我们使用document.getElementById
方法获取地图容器的元素,并通过new google.maps.Map
创建地图对象。您可以根据需要设置地图的中心点和缩放级别。
window.onload = function() {
initMap();
};
这样,页面就会加载两个具有不同id的Google地图。
Google地图是一款功能强大的地图服务,可以广泛应用于各种场景,包括但不限于以下几个方面:
腾讯云提供了一系列与地图相关的产品和服务,包括地图开放平台、位置服务、地理围栏等。您可以通过以下链接了解更多信息:
领取专属 10元无门槛券
手把手带您无忧上云