[jquery-ui-map] Centrer la carte sur un marker

**franpom** · 24/09/2013, 21h26

Bonjour,

J'ai un problème que je n'arrive pas a résoudre. Pourriez vous m'aider ?

Le but que je recherche c'est d'ajouter un marker sur la carte et de centrer cette carte sur ce marker avec un zoom de 12.
Lorsque je place le premier marker cela fonctionne parfaitement.

Quand je place le 2eme marker, j'efface le premier et mon problème, c'est que la carte ne se centre pas sur mon 2eme marker mais entre le premier et le 2eme.

Pourquoi la carte se centre t'elle entre les 2 marker vu que le premier est effacé et que j'indique à la carte de ce centrer sur les coordonnées du 2eme ?

Mon code de test :

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
<!doctype html>
<html>
    <head>
        <meta http-equiv="content-language" content="fr">
        <meta charset="utf-8">
        <script type="text/javascript" src="jquery/jquery-1.9.1.js"></script>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript" src="jquery/jquery.ui.map.js"></script>
    </head>
    <body>
        <div style="height: 500px; width:500px;" id="div_carte"></div>
        <button id="btnChangeZoom">change zoom</button>
        <button id="btnPos1">Chateauroux</button>
        <button id="btnPos2">Bourges</button>
        <script type="text/javascript">
        $(function() {
            $( "#div_carte" ).gmap({
                'center': '46.80, 1.70',
                'scrollwheel': true,
                'mapTypeId': google.maps.MapTypeId.ROADMAP,
                'maxZoom': 17,
                'minZoom': 6,
                'zoom': 6
            }).bind('init', function(event, map) {
                $(map).click( function(event) {
                    alert(event.latLng);
                });
            });
        });
 
        $("#btnChangeZoom").click(function(){changeZoom()});
        $("#btnPos1").click(function(){changePos('46.80663961382989, 1.679534912109375')});
        $("#btnPos2").click(function(){changePos('47.08882558740757, 2.427978515625')});
 
        function changeZoom(){
            $('#div_carte').gmap('option', 'zoom', 10);
        }
 
        function changePos(latlng){
            $('#div_carte').gmap('clear', 'markers');
            $('#div_carte').gmap('addMarker', {
                'position': latlng,
                'bounds': true
            }).click(function() {
                $('#div_carte').gmap('openInfoWindow', {'content': latlng}, this);
            });
            $('#div_carte').gmap('option', 'zoom', 12);
            $('#div_carte').gmap({'center': latlng});
        }
        </script>
    </body>
</html>

Merci d'avance pour votre aide.
Franpom

**NoSmoking** · 25/09/2013, 22h43

Bonjour,
tu fais un mauvais appel de la méthode, il te faut écrire

Code :

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

1
2
var pos = latlng.split(',');
$('#div_carte').gmap('option', 'center',  new google.maps.LatLng( pos[0], pos[1]));

ou encore

Code :

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

1
2
var pos = latlng.split(',');
$('#div_carte').gmap('get', 'map').setCenter( new google.maps.LatLng( pos[0], pos[1]));

Perso je ne vois pas l'utilité de passer par cette couche JS si l'on n'utilise pas par ailleurs jQuery.
De plus j'ai l'impression que la bibliothèque gmap3 me paraît plus aboutie au premier coup d'oeil.

**franpom** · 25/09/2013, 22h53

Bonjour,

Merci pour votre réponse. Cela fonctionne à merveille.

Par rapport à votre remarque sur l'utilisation de cette méthode.
N'étant pas spécialise, pouvez vous me conseiller ?
Mon but étant d'écrire un site web qui utilise une carte Google ou autre pour placer des éléments dessus via une BBD.
Dans mes différente recherche il m'a semblé que jquery-ui-map était bien adapté à mon besoin.
Utiliseriez vous l'API de google ou gmap3 ou autre ?

Franpom

**NoSmoking** · 26/09/2013, 18h56

Dans tes différentes recherche tu aurais pu tomber sur FAQ API Google Maps, et tu aurais pu te rendre compte que cela restait trivial comme utilisation.

Je n'ai jamais testé le plugin jQuery, pas le besoin. On peut faire pas mal de chose avec l'utilisation de l'API en js "standard" pourquoi ajouter une couche qui dans certains cas ne fait que faire appel à l'API sans "plus value".

Il n'empêche que si tu utilises déjà jQuery tu tireras avantage d'une syntaxe commune donc d'une mise en oeuvre simple.

Pour en finir la mise à jour de gmap3 est plus récente, ce qui je le concède ne veux pas dire forcément que c'est mieux

.

Le "pire" c'est qu'en cherchant un peu je pense que l'on en trouverait une demi douzaine au moins.

[jquery-ui-map] Centrer la carte sur un marker [Google Maps]

APIs Google

Discussions similaires

Partager

Partager