J'essaie d'afficher une carte sur ma page Web pour en obtenir les coordonnées. Cela fonctionne bien, je peux glisser et déposer un marqueur et obtenir les coordonnées dans les zones de saisie.
Mais mon problème vient quand je charge la page Web. Tout est bien affiché sauf la carte, vous pouvez voir comment la carte est affichée:
Mais si en ce moment je redimensionne la page Web, je veux dire, si elle était en plein écran, la mettre à moitié. Ou rendez-le un peu plus grand ou plus petit s'il ne s'agissait que d'une partie de l'écran. Ensuite, vous verrez la bonne carte:
(Ce n'est pas le même endroit, je sais. J'ai pris l'image de 2 recharges)
Je crée la page Web en HTML, mais je l'appelle comme s'il s'agissait de pages Web distinctes. Lorsque vous chargez l'index, vous obtenez un bouton avec cette
href:<a href="#openMap">
Et, la partie montrée sera:
<div data-role="page" id="openMap" data-theme="e">
<div data-role="header" data-id="fixedNav" data-position="fixed">
blablabla
<div data-role="content">
<form action="">
<div id="map_canvas" style="width:500px; height:300px"></div>
blablabla
Et tous les divs, les formulaires ... correctement fermés. J'ai beaucoup de champs de saisie et de champs que je n'ai pas mis ici.
Ensuite, dans mon script de carte Google, j'ai ceci:
var map;
function initializeNewMap() {
var myLatlng = new google.maps.LatLng(43.462119485,-3.809954692009);
var myOptions = {
zoom: 14,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
draggable: true,
position: myLatlng,
map: map,
title: "Your location"
});
}
Mais je ne sais pas pourquoi j'ai besoin de redimensionner. Est-ce un moyen de le résoudre?
EDIT: J'ajoute plus d'informations:
J'appelle la partie de la page Web qui a la carte de cette façon:
$(document).on("pageinit", '#openMap', function() {
J'ai essayé de mettre
google.maps.event.trigger(map, 'resize');
juste après mais rien ne se passe.
J'ai trouvé la solution dans une autre question ( Google Maps v3 se charge partiellement dans le coin supérieur gauche, l'événement de redimensionnement ne fonctionne pas , publication de Ian Devlin):
Comme un utilisateur l’a dit ici, je dois redimensionner la carte. Mais juste cette ligne n'a pas fonctionné. J'ai ajouté ce code à la fin de la fonction d'initialisation:
google.maps.event.addListenerOnce(map, 'idle', function() {
google.maps.event.trigger(map, 'resize');
});
Donc, il est juste appelé après l'affichage de la carte.
Moi aussi j'ai fait face à ce problème, je l'ai résolu en déclenchant Google mapsresize
.
google.maps.event.trigger(map, 'resize');
Mises à jour:
var map;
function initializeNewMap() {
// add your code
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.trigger(map, 'resize');
}
J'espère que tu as compris.
J'ai eu un problème similaire mais vous ne pouviez voir aucune partie de la carte (la boîte entière était grise).
Ce qui l’a résolu pour moi a été de réaliser que la div qui contenait la carte commençait comme cachée en utilisant
display:none;
Si vous utilisez plutôt
visibility:hidden;
La div conserve sa taille tout en apparaissant toujours comme étant masquée. La carte, une fois initialisée, utilise sa hauteur et sa largeur correctes, plutôt que les valeurs 0.
J'espère que cela t'aides!
Vous devez avoir à initialiser la carte après que le conteneur (où vous placez la carte) soit visible,
Par exemple, j'ai plusieurs onglets et le dernier onglet contient la carte, J'ai résolu le problème en:
$('#map-tab').click(function() {
// init map
});
Ici, je me suis d'abord assuré que le conteneur obtenait de la visibilité (lorsque cliquer sur cet élément pour révéler la section contenant la carte) puis initialiser la carte
CA marchait bien pour moi;
Si vous utilisez des aides à la présentation basées sur JavaScript (tels que Foundation Equalizer ), vous devez vous assurer que le conteneur de cartes a la taille définitive avant de charger la carte, de sorte que vous n'obteniez pas la fameuse carte grise et certains attributs tels que center
fonctionne comme prévu - ou utilisez les événements du plug-in tiers pour déclencher un rappel personnalisé qui corrige la carte. Par exemple.:
var map = new google.maps.Map(/*...*/);
$(document).on("after-height-change.fndtn.equalizer", function(){
google.maps.event.trigger(map, 'resize');
});
Ma carte était cachée dans un onglet Twitter Bootstrap et n'était donc pas visible lors de l'initialisation de la carte. J'avais donc besoin d'appeler le redimensionnement lorsque l'onglet était sélectionné comme suit:
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
google.maps.event.trigger(map, 'resize');
})