[jquery-ui-map] Centrer la carte sur un marker
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:
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
