Discussion :

[lokomass]

Bonjour à tous,

J'utilise le plugin gmaps pour mobile, afin d'afficher des points sur mes maps.
Ça fonctionne parfaitement cependant, j'ai un souci de "recentrage".
En fait, lorsque l'utilisateur clique sur une adresse, une popup s'ouvre (aux dimensions de l'écran) et affiche la carte en plein écran sur le mobile de la personne, et centre la map sur l'adresse sélectionnée : jusque là parfait.
Si l'utilisateur passe son mobile en paysage par exemple, la taille de la carte n'est plus bonne (adaptée précemment aux dimensions de l'écran), et le centre de la map n'est plus du tout bon non plus.
Du coup, j'ai écris une fonction sur l'évènement resize qui recalcule la taille de l'écran, adapate la carte et recentre l'adresse.
Ça fonctionne parfait sur un mobile Android, mais sur iPhone, impossible de recentrer la carte....
J'ai créé ce fiddle, qui fonctionne très bien sur PC avec firefox par exemple, si on redimensionne la case, ça recentre le marqueur, sous android mobile, ça fonctionne aussi, juste sous iPhone, je ne comprend pas pourquoi, seul le recentrage du marqueur ne fonctionne pas (le redimensionnement de #carte fonctionne)

https://jsfiddle.net/q3p81bzx/11/

Merci pour votre aide

[NoSmoking]

Bonjour,
tu peux également envoyer une action à ta carte sur le 'resize'.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

google.maps.event.trigger( oMap, 'resize');

et demander le recentrage

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

oMap.setCenter( oMap.getCenter());

à voir l'intégration dans ton environnement.

[lokomass]

Merci pour ton réponse, en adaptant ton code, ça ne fonctionne plus du coup : https://jsfiddle.net/q3p81bzx/12/

[NoSmoking]

Je t'ai pourtant prévenu

à voir l'intégration dans ton environnement.

lorsque tu fais map = new GMaps({, tu obtiens un objet GMaps et non un objet google.maps.Map, il est important de le comprendre. Ton objet Gmaps possède quand même un objet google.maps.Map auquel on accède via GMpas.map.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
// création d'un objet GMaps
var oMap = new GMaps({
    el: '#carte',
    lat: latitude,
    lng: longitude
  });
/**
* ATTENTION à bien faire la distinction
**/
console.log( 'objet Google : ', oMap.map);
console.log( 'objet Gmaps  : ', oMap);

donc dans ta fonction de « resize » il te faut utiliser les méthodes qui s'appliquent à l'objet que tu manipules

[lokomass]

Je te remercie, effectivement je comprends l'idée.
Mais en fait je ne comprends vraiment pas pourquoi mon exemple initial ne fonctionne pas sur iPhone (et uniquement sur iPhone).
En fait je n'arrive pas à adapter ton exemple dans le mien : https://jsfiddle.net/q3p81bzx/11/

[NoSmoking]

En fait je n'arrive pas à adapter ton exemple dans le mien...

essaie avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
$(window).resize(function () {
    width = $(window).width();
    height = $(window).height();
    $('#carte').css({
        'width': width,
        'height': height
    });
    var pt = map.getCenter();
    google.maps.event.trigger(map.map, 'resize');
    map.setCenter(pt.lat(), pt.lng());
})

[lokomass]

Quelle machine, ça fonctionne impeccable !! Depuis le temps que je galérais, merci beaucoup !

[NoSmoking]

Pour rester dans le code de la librairie tu pourrais même remplacer google.maps.event.trigger(map.map, 'resize'), c'est dugoogle.map, par map.refresh(), c'est du Gmap.