comment traiter avec google map à l'intérieur d'un div caché (Image mise à jour)
j'ai une page et une carte Google est à l'intérieur d'un div caché au début. Je montre ensuite la div après avoir cliqué sur un lien, mais seule la partie supérieure gauche de la carte apparaît.
j'ai essayé de faire exécuter ce code après le clic:
map0.onResize();
ou:
google.maps.event.trigger(map0, 'resize')
des idées. Voici une image de ce que je vois après avoir montré la div avec la carte cachée dedans.
Je l'ai juste testé moi-même et voici comment je l'ai abordé. Assez simple, laissez-moi savoir si vous avez besoin de clarification
HTML
<div id="map_canvas" style="width:700px; height:500px; margin-left:80px;" ></div>
<button onclick="displayMap()">Show Map</button>
CSS
<style type="text/css">
#map_canvas {display:none;}
</style>
Javascript
<script>
function displayMap()
{
document.getElementById( 'map_canvas' ).style.display = "block";
initialize();
}
function initialize()
{
// create the map
var myOptions = {
zoom: 14,
center: new google.maps.LatLng( 0.0, 0.0 ),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map( document.getElementById( "map_canvas" ),myOptions );
}
</script>
J'avais le même problème et j'ai découvert que, lorsque vous présentez la div, appelez google.maps.event.trigger(map, 'resize'); et il semble que le problème soit résolu pour moi.
google.maps.event.trigger($("#div_ID")[0], 'resize');
Si vous n'avez pas de carte variable disponible, il devrait s'agir du premier élément (à moins que vous n'ayez fait quelque chose de stupide) dans le div qui contient GMAP.
J'avais une carte Google dans un onglet Bootstrap], qui ne s'affichait pas correctement. C’était ma solution.
// Previously stored my map object(s) in googleMaps array
$('a[href="#profileTab"]').on('shown', function() { // When tab is displayed...
var map = googleMaps[0],
center = map.getCenter();
google.maps.event.trigger(map, 'resize'); // fixes map display
map.setCenter(center); // centers map correctly
});
Comment actualiser la carte lorsque vous redimensionnez votre div
Il ne suffit pas d'appeler google.maps.event.trigger(map, 'resize'); Vous devez également réinitialiser le centre de la carte.
var map;
var initialize= function (){
...
}
var resize = function () {
if (typeof(map) == "undefined") {) {
// initialize the map. You only need this if you may not have initialized your map when resize() is called.
initialize();
} else {
// okay, we've got a map and we need to resize it
var center = map.getCenter();
google.maps.event.trigger(map, 'resize');
map.setCenter(center);
}
}
Comment écouter l'événement de redimensionnement
angulaire (effondrement de ng-show ou ui-bootstrap)
Liez directement à la visibilité de l'élément plutôt qu'à la valeur liée à ng-show, car $ watch peut se déclencher avant la mise à jour de ng-show (le div sera donc toujours invisible).
scope.$watch(function () { return element.is(':visible'); },
function () {
resize();
}
);
jQuery .show ()
Utiliser le rappel intégré
$("#myMapDiv").show(speed, function() { resize(); });
Bootstrap 3 Modal
$('#myModal').on('shown.bs.modal', function() {
resize();
})
Si vous avez inséré une carte dans Google en copiant/collant le code iframe et que vous ne voulez pas utiliser l'API Google Maps, c'est une solution simple. Il suffit d’exécuter la ligne javascript suivante lorsque vous affichez la carte masquée. Il suffit de insérer le code HTML iframe et de l'insérer au même endroit pour qu'il s'affiche à nouveau:
document.getElementById("map-wrapper").innerHTML = document.getElementById("map-wrapper").innerHTML;
version jQuery:
$('#map-wrapper').html( $('#map-wrapper').html() );
Le HTML:
....
<div id="map-wrapper"><iframe src="https://www.google.com/maps/..." /></div>
....
L'exemple suivant fonctionne pour une carte initialement masquée dans un onglet Bootstrap 3:
<script>
$(document).ready( function() {
/* Detects when the tab is selected */
$('a[href="#tab-id"]').on('shown.bs.tab', function() {
/* When the tab is shown the content of the wrapper
is regenerated and reloaded */
$('#map-wrapper').html( $('#map-wrapper').html() );
});
});
</script>
Il est également possible de déclencher l'événement de redimensionnement de la fenêtre native.
Google Maps se rechargera automatiquement:
window.dispatchEvent(new Event('resize'));
J'ai eu le même problème, la google.maps.event.trigger(map, 'resize') ne fonctionnait pas pour moi.
Ce que j’ai fait, c’est de mettre un chronomètre pour mettre à jour la carte après avoir mis visible le div...
//CODE WORKING
var refreshIntervalId;
function showMap() {
document.getElementById('divMap').style.display = '';
refreshIntervalId = setInterval(function () { updateMapTimer() }, 300);
}
function updateMapTimer() {
clearInterval(refreshIntervalId);
var map = new google.maps.Map(....
....
}
Je ne sais pas si c'est le moyen le plus pratique de le faire mais ça marche!
Avec jQuery, vous pouvez faire quelque chose comme ça. Cela m'a aidé à charger une carte Google dans Umbraco CMS sur un onglet qui ne serait pas visible immédiatement.
function waitForVisibleMapElement() {
setTimeout(function () {
if ($('#map_canvas').is(":visible")) {
// Initialize your Google Map here
} else {
waitForVisibleMapElement();
};
}, 100);
};
waitForVisibleMapElement();
Ma solution est très simple et efficace:
HTML
<div class="map-wrap">
<div id="map-canvas"></div>
</div>
CSS
.map-wrap{
height:0;
width:0;
overflow:hidden;
}
Jquery
$('.map-wrap').css({ height: 'auto', width: 'auto' }); //For showing your map
$('.map-wrap').css({ height: 0, width: 0 }); //For hiding your map
Comme John Doppelmann et HoffZ l'ont indiqué, rassemblez tout le code comme suit dans votre fonction d'affichage de div ou votre événement onclick:
setTimeout(function(){
var center = map.getCenter();
google.maps.event.trigger(map, 'resize');
map.setCenter(center);
});
Cela a fonctionné parfaitement pour moi
J'ai trouvé que cela fonctionne pour moi:
cacher:
$('.mapWrapper')
.css({
visibility: 'hidden',
height: 0
});
montrer:
$('.mapWrapper').css({
visibility: 'visible',
height: 'auto'
});
Si utilisé dans Bootstrap v3 onglets, ce qui suit devrait fonctionner:
$('a[href="#tab-location"]').on('shown.bs.tab', function(e){
var center = map.getCenter();
google.maps.event.trigger(map, 'resize');
map.setCenter(center);
});
où tab-location est l'ID de l'onglet contenant la carte.
Je suppose que la question initiale concerne une carte incorporée dans une partie cachée de la page. J'ai résolu un problème similaire en redimensionnant la carte dans la div masquée lorsque le document est prêt, après son initialisation, quel que soit son statut d'affichage. Dans mon cas, j'ai 2 cartes, une est affichée et une est masquée lors de leur initialisation et je ne souhaite pas initialiser une carte à chaque fois. C'est un ancien post, mais j'espère que cela aidera tous ceux qui cherchent.
Je n’aimais pas que la carte se charge seulement après que la div cachée soit devenue visible. Dans un carrousel, par exemple, cela ne fonctionne pas vraiment.
Cette solution consiste à ajouter une classe à l'élément masqué pour la masquer et la masquer avec une position absolue, puis restituer la carte et supprimer la classe après le chargement de la carte.
Testé dans Bootstrap Carousel.
HTML
<div class="item loading"><div id="map-canvas"></div></div>
CSS
.loading { display: block; position: absolute; }
JS
$(document).ready(function(){
// render map //
google.maps.event.addListenerOnce(map, 'idle', function(){
$('.loading').removeClass('loading');
});
}
utilisez cette ligne de codes lorsque vous souhaitez afficher la carte.
$("#map_view").show("slow"); // use id of div which you want to show.
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize";
document.body.appendChild(script);
Ajoutez ce code avant la div ou transmettez-le dans un fichier js:
<script>
$(document).on("pageshow","#div_name",function(){
initialize();
});
function initialize() {
// create the map
var myOptions = {
zoom: 14,
center: new google.maps.LatLng(0.0, 0.0),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("div_name"), myOptions);
}
</script>
Cet événement sera déclenché après le chargement de la div, ce qui actualisera le contenu de la carte sans avoir à appuyer sur F5.
$("#map_view").show("slow"); // use id of div which you want to show.
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=initialize";
document.body.appendChild(script);
Premier poste. Mon div googleMap était dans un conteneur div avec {display: none} jusqu'à ce que l'onglet soit cliqué. Avait le même problème que OP. Cela a fonctionné pour moi:
google.maps.event.addDomListener(window, 'load', setTimeout(initialize, 1));
Collez ce code à l'intérieur et à la fin de votre code, sur lequel l'onglet de div en conteneur est cliqué et révèle votre div caché. L'important est que votre conteneur div doit être visible avant que l'initialisation puisse être appelée.
J'ai essayé un certain nombre de solutions proposées ici et d'autres pages et elles ne fonctionnaient pas pour moi. Faites-moi savoir si cela fonctionne pour vous. Merci.
Lors de l'affichage de la carte, je géocode une adresse puis définit le centre des cartes. La google.maps.event.trigger(map, 'resize'); n'a pas fonctionné pour moi.
Je devais utiliser une map.setZoom(14);
Code ci-dessous:
document.getElementById('map').style.display = 'block';
var geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': input.value }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker2 = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
map.setZoom(14);
marker2.addListener('dragend', function (event) {
$('#lat').val(event.latLng.lat());
$('#lng').val(event.latLng.lng());
});
}
});
Ma solution était:
CSS:
.map {
height: 400px;
border: #ccc solid 1px;
}
jQuery:
$('.map').width(555); // width of map canvas