Discussion :

[anthony88]

Bonjour,

je suis en train de créer un application avec l'api gmaps où l'on trouve des adresses et quand on clique dessus, une info bulle s'ouvre avec les infos.

J'ai réussit à tout faire fonctionner comme il faut, mais lorsque l'info bulle s'ouvre, la carte se centre sur le marker et une partie de la bulle se retrouve en dehors du cadre.
Je ne souhaite pas réduire la taille de la bulle, par contre est il possible de définir des coordonnées pour spécifier la réaction de ce recentrage ?
De quelle manière ?


Merci d'avance!

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
var map = null;
var infowindow;
var markers=new Array();
 
 
$("ul.ListAddress li div").live("click", function() {
 
    /* change la class du point selectionné et supprime la class des autres */
    $(this).parents("ul.ListAddress").find("li").removeClass("selected");
    $(this).parent("li").addClass("selected");
 
    var obj = jQuery.parseJSON($(this).parent().find("span.ShopDetails").text());
 
    /* cherche l\'id du marker */
    var markersID = $(this).parent().attr("id").split("_");
 
    map.panTo(new google.maps.LatLng(obj.coordGeolocalisationLatitude, obj.coordGeolocalisationLongitude));
    google.maps.event.trigger(markers[markersID[1]], "click");
 
});
 
function initialize(address) {
 
    var myOptions = {
        zoom: 6,
        center: new google.maps.LatLng(46.97534599999999, 1.7681250000000546),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
 
    /* Creation de la map */
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 
    /* recupere les valeurs de toutes les adresses*/
    var ShopValues = $("ul.ListAddress span[class='ShopDetails']").map(function(){return $(this).text();}).get();
 
    /* place les points sur la carte de chaques adresses*/
    $.each(ShopValues, function(index, value) {
       /* decode les valeurs */
       setPointRelais(map, jQuery.parseJSON(value));
   });
 
    /* permet de fermer les markers lors d'un click sur la carte */
    google.maps.event.addListener(map, 'click', function() {
        if (infowindow) infowindow.close();
    });
}
 
function setPointRelais(map, jsonPointRelais){
 
    var image = new google.maps.MarkerImage('inc.common/mtfw.shop/styles/img/shop_locator_logo_thumb.png', new google.maps.Size(29, 29), new google.maps.Point(0,0));
    var shape = { coord: [1, 1, 1, 37, 32, 37, 32 , 1], type: 'poly'};
    var myLatLng = new google.maps.LatLng(jsonPointRelais.coordGeolocalisationLatitude, jsonPointRelais.coordGeolocalisationLongitude);
 
    var marker = new google.maps.Marker({
 
        position: myLatLng,
        map: map,
        icon: image,
        flat: false,
        animation: google.maps.Animation.DROP,
        shape: shape,
        title: jsonPointRelais.nom,
 
    }); 
 
 
    /*Envoi le contenu en fonction de la valeur de actif*/
    if (jsonPointRelais.actif == 0){
    var contenuInfoBulle = 'blablabla';
    }
    else{
    var contenuInfoBulle = 'blablabla';
    }
 
    google.maps.event.addListener(marker, 'click', function() {
        if (infowindow) infowindow.close();
        infowindow = new InfoBubble({content: contenuInfoBulle});
        infowindow.open(map, marker);
    });
 
    marker.setMap(map);
    markers.push(marker);
}

[NoSmoking]

Bonsoir,

J'ai réussit à tout faire fonctionner comme il faut, mais lorsque l'info bulle s'ouvre, la carte se centre sur le marker et une partie de la bulle se retrouve en dehors du cadre.

ce n'est pourtant pas le comportement par défaut qui cherche à afficher entièrement l'infoWindow.

que crois tu que fait cette ligne

Code :

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

map.panTo(new google.maps.LatLng(obj.coordGeolocalisationLatitude, obj.coordGeolocalisationLongitude));

[anthony88]

La ligne donne les coordonnées de positionnement pour le marker.
Je me trompe ?

[NoSmoking]

La ligne donne les coordonnées de positionnement pour le marker.
Je me trompe ?

OUI (réponse à "Je me trompe ?"), elle centre la carte sur le point avec un effet de glissement
google.maps.Map class