Я пытаюсь внедрить пользовательскую карту GoogleMap на свой сайт Adobe Muse. Я не хочу использовать простую встроенную карту, так как хочу, чтобы карта имела особый вид. Поэтому я стилизовал его с помощью Snazzy Maps.
Проблема в том, что карта появляется только после изменения размера окна или прокрутки страницы вниз (на мобильных устройствах).
Я пытался сделать все, что говорит нам документация 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:[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>
