-1
J'essaie de mettre en place un GoogleMap personnalisé sur mon site Adobe Muse. Je ne veux pas utiliser la simple carte intégrée car je veux que la carte ait un aspect spécifique. Par conséquent, je l'ai stylé en utilisant Snazzy Maps.L'API Google Maps ne s'affiche pas jusqu'à redimensionnement ou défilement
Le problème est que la carte n'apparaît qu'après le redimensionnement de la fenêtre ou le défilement de la page (sur mobile).
J'ai essayé de faire tout ce que la documentation de Google Maps nous dit de faire et j'ai lu beaucoup de problèmes d'autres personnes, mais cela n'a pas fonctionné à la fin. Pour être honnête: Je ne sais pas exactement ce que je fais depuis que je viens de commencer à travailler avec ce genre de choses.
Toute aide serait grandement appréciée! Merci!
C'est ce que mon code ressemble au moment (ndlr: j'ai une clé API, je viens de l'a sorti):
<!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>
Je l'ai essayé avec Safari sur iOS, mais je peux reproduire le problème avec le mode réactif sur les versions de bureau de Safari et Chrome. Et la version de bureau ordinaire la carte montre seulement après le redimensionnement – user8086074
alors u peut da hack comme $ (document) .ready (function() {$ (fenêtre) .trigger ('resize') }) où –
Est-ce que j'insérerais votre code exactement? – user8086074