-1
這是我的整個代碼,我不知道爲什麼它不起作用。我知道這個問題之前曾被問過,但我仍然沒有找到解決這個問題的方法。我需要把多個谷歌地圖......我可以用一個做到這一點,但是當我嘗試初始化多,這是行不通的:無法在一個頁面中添加多個Google地圖?
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Best Bikeparks</title>
<style>
html, body {
height:100%
margin: 0;
padding: 0;
}
#map1 {
width: 175px;
height: 120px;
background-color: #CCC;
}
#map2 {
width: 175px;
height: 120px;
background-color: #CCC;
}
#map3 {
width: 175px;
height: 120px;
background-color: #CCC;
}
</style>
</head>
<body>
<div id="map1"></div>
<div id="map2"></div>
<div id="map3"></div>
<script>
function initialize() {
var myLatlng1 = new google.maps.LatLng(39.630159,-84.175937);
var myLatlng2 = new google.maps.LatLng(33.677705,-117.852974);
var myLatlng3 = new google.maps.LatLng(51.520614,-0.121825);
var mapOptions1 = {
zoom: 15,
center: myLatlng1,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: 0
}
var mapOptions2 = {
zoom: 15,
center: myLatlng2,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: 0
}
var mapOptions3 = {
zoom: 15,
center: myLatlng3,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: 0
}
var map1= new google.maps.Map(document.getElementById('map1'),mapOptions1);
var map2 = new google.maps.Map(document.getElementById('map2'), mapOptions2);
var map3 = new google.maps.Map(document.getElementById('map3'), mapOptions3);
var marker1 = new google.maps.Marker({
position: myLatlng1,
map: map1,
title: 'Herastrau'
});
var marker2 = new google.maps.Marker({
position: myLatlng2,
map: map2,
title: 'Insbruck'
});
var marker3 = new google.maps.Marker({
position: myLatlng3,
map: map3,
title: 'Blala'
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key= MyAPI">
</script>
</body>
</html>
您的標記是無效的。你有2個具有相同ID的div,可能會丟掉東西。嘗試修復,看看是否可以解決問題。此外,您將API腳本包含兩次,這不是必需的,也可能會導致腳本錯誤。 –
謝謝,但依然如此。 – Barek