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> |
Partager