-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