-1
我試圖在我的Adobe Muse網站上實現自定義GoogleMap。我不想使用簡單的嵌入式地圖，因爲我希望地圖具有特定的外觀。因此我使用時髦地圖來設計它。谷歌地圖API不顯示，直到調整大小或滾動
問題是地圖只顯示在窗口調整大小或頁面向下滾動（在手機上）之後。
我試圖做所有Google地圖文檔告訴我們要做的事情，而且我讀了很多其他人的問題，但最終沒有成功。
說實話：自從我剛開始使用這些東西時，我並不確切知道自己在做什麼。
任何幫助將不勝感激！謝謝！
這就是我的代碼看起來像此刻（注：我有一個API密鑰，我只是把它）：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
#map {
height: 389px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map
function initMap() {
var company = {lat: 49.7929423, lng: 9.930044800000019};
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 49.7929423, lng: 9.930044800000019},
zoom: 12,
mapTypeControl: false,
streetViewControl: false,
fullScreenControl: false,
scrollwheel: false,
styles: [
{
"featureType": "administrative",
"elementType": "labels.text.fill",
"stylers": [
{
"color": "#444444"
}
]
},
{
"featureType": "landscape",
"elementType": "all",
"stylers": [
{
"saturation": "-0"
},
{
"lightness": "0"
}
]
},
{
"featureType": "landscape",
"elementType": "geometry",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "landscape",
"elementType": "geometry.fill",
"stylers": [
{
"color": "#f2f2f2"
}
]
},
{
"featureType": "landscape",
"elementType": "geometry.stroke",
"stylers": [
{
"gamma": "1.40"
},
{
"weight": "1"
},
{
"color": "#dcdcdc"
},
{
"visibility": "on"
}
]
},
{
"featureType": "landscape.man_made",
"elementType": "all",
"stylers": [
{
"saturation": "-60"
}
]
},
{
"featureType": "landscape.man_made",
"elementType": "geometry.stroke",
"stylers": [
{
"gamma": "1.0"
}
]
},
{
"featureType": "landscape.natural",
"elementType": "geometry.stroke",
"stylers": [
{
"gamma": "1.00"
}
]
},
{
"featureType": "poi",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.park",
"elementType": "geometry",
"stylers": [
{
"visibility": "simplified"
}
]
},
{
"featureType": "poi.place_of_worship",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "poi.place_of_worship",
"elementType": "geometry",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "poi.place_of_worship",
"elementType": "geometry.stroke",
"stylers": [
{
"color": "#dcdcdc"
}
]
},
{
"featureType": "road",
"elementType": "all",
"stylers": [
{
"saturation": -100
},
{
"lightness": 45
}
]
},
{
"featureType": "road.highway",
"elementType": "all",
"stylers": [
{
"visibility": "simplified"
}
]
},
{
"featureType": "road.arterial",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "transit",
"elementType": "all",
"stylers": [
{
"visibility": "off"
}
]
},
{
"featureType": "water",
"elementType": "all",
"stylers": [
{
"color": "#8ecde8"
}
]
},
{
"featureType": "water",
"elementType": "labels",
"stylers": [
{
"visibility": "on"
},
{
"color": "#ffffff"
}
]
},
{
"featureType": "water",
"elementType": "labels.text",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "water",
"elementType": "labels.text.stroke",
"stylers": [
{
"visibility": "on"
}
]
},
{
"featureType": "water",
"elementType": "labels.icon",
"stylers": [
{
"visibility": "on"
}
]
}
]
});
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading"><b>LOREM IPSUM</b></h1>'+
'<div id="bodyContent">'+
'<p>Street 12 <br>'+
'12345 City <br>'+
'country <br><br></p>'+
'<p>Telefon: +12345/67890</p>'+
'<p>E-Mail: <a href="mailto:[email protected]"><b>[email protected]</b></a></p><br>'+
'<a href="https://www.google.de/maps/dir//New+York+City,+New+York,+USA/@43.8418941,-49.971677,4z/data=!4m8!4m7!1m0!1m5!1m1!1s0x89c24fa5d33f083b:0xc80b8f06e177fe62!2m2!1d-74.0059413!2d40.7127837" target="_blank"><b>Directions</b>'+
'</div>'+
'</div>';
var infowindow = new google.maps.InfoWindow({
content: contentString,
maxWidth: 400
});
var image = {
url: 'http://www.example.com/marker-me.png',
scaledSize : new google.maps.Size(46, 60),
};
var marker = new google.maps.Marker({
animation: google.maps.Animation.DROP,
position: company,
map: map,
icon: image,
title: 'company'
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
var center;
function calculateCenter() {
center = map.getCenter();
}
google.maps.event.addDomListener(map, 'idle', function() {
calculateCenter();
});
google.maps.event.addDomListener(window, 'resize', function() {
map.setCenter(center);
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=xxx&callback=initMap" async defer>
</script>
</body>
</html>
我用Safari瀏覽器試了一下在iOS上，但我可以在Safari和Chrome的桌面版本的響應模式複製的問題。而在常規桌面版地圖僅調整 – user8086074
然後後顯示出來U可以達黑客喜歡 $（文件）。就緒（函數（）{$ （窗口）.trigger（「調整」） }） –
哪裏我是否會插入你的代碼？ – user8086074