Redimensionner et Centrer maps sur mobile

Version imprimable

04/05/2016, 11h46
lokomass

Redimensionner et Centrer maps sur mobile

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
04/05/2016, 12h24
NoSmoking

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

Code:

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

et demander le recentrage

Code:

oMap.setCenter( oMap.getCenter());

à voir l'intégration dans ton environnement.
04/05/2016, 14h00
lokomass

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

Je t'ai pourtant prévenu

Citation:

à 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:

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 ;)

22/05/2016, 14h30
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/

Citation:

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

essaie avec

Code:

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());
})

23/05/2016, 15h31
lokomass

Quelle machine, ça fonctionne impeccable !! Depuis le temps que je galérais, merci beaucoup !
24/05/2016, 15h58
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.