我正在尝试在我的Adobe Muse网站上实现自定义GoogleMap。我不想使用简单的嵌入式地图，因为我希望该地图具有特定的外观。因此，我使用时髦的地图对其进行了设计。
问题在于地图仅在调整窗口大小或页面向下滚动后显示(在移动设备上(。
我试图做所有的Google Maps文档告诉我们要做的事情，并且我读了很多其他人的问题，但最终没有解决。
说实话：我不知道我刚开始使用这些事情以来我在做什么。
任何帮助将不胜感激！谢谢！
这就是我的代码目前的样子(注意：我确实有一个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:info@mail.com"><b>info@mail.com</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>
它工作正常，可能是您使用的移动浏览器的问题。提及浏览器类型/版本。
更改Google API参数中的缩放级别，您当前提到的Zoom：12