|
|
|
|
|
LES BOUTONS DE CONTRÔLE (API V3)
!!!! En cours de rédaction !!!!
Bouton de zoom (API V3)
<html>
<head>
<title>Application Google Maps : Bouton de zoom (API V3)</title>
<!-- Ce meta tag spécifie que la carte sera affichée
à la dimension imposée et de sera pas modifiable par l'utilisateur -->
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<!-- Pointe la bibliothèque google maps V3 -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
function init_map()
{
var myOptions =
{
zoom: 12,
center: new google.maps.LatLng(48.85929404029, 2.341461181640),
scaleControl: true,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
<!-- Création de l'objet carte dans le DIV "my_map" -->
var map = new google.maps.Map(document.getElementById("my_map"), myOptions);
}
</script>
</head>
<!-- Au moment où la page se télécharge la fonction "load()" charge la carte -->
<body onload="init_map()">
<!-- "map" est l'identifiant du calque qui recevra la carte -->
<div id="my_map" style="width: 500px; height: 300px"></div>
</body>
</html>
|
Explications :
 Il faut remarquer qu'avant de poser la propriété du boutons de zoom, if faut placer la propriété "scaleControl: true"
Ensuite on déclare la propriété "navigationControlOptions: {style: google.maps.NavigationControlStyle.TYPE DE ZOOM).
"TYPE DE ZOOM" peut-être : SMALL (petit), ZOOM_PAN (grand), ANDROID (version Android).
Résultat :
SMALL
ZOOM_PAN
ANDROID
Bouton type de carte (API V3)
<html>
<head>
<title>Application Google Maps : Bouton type de carte (API V3)</title>
<!-- Ce meta tag spécifie que la carte sera affichée
à la dimension imposée et de sera pas modifiable par l'utilisateur -->
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<!-- Pointe la bibliothèque google maps V3 -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
function init_map()
{
var myOptions =
{
zoom: 12,
center: new google.maps.LatLng(48.85929404029, 2.341461181640),
mapTypeControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
<!-- Création de l'objet carte dans le DIV "my_map" -->
var map = new google.maps.Map(document.getElementById("my_map"), myOptions);
}
</script>
</head>
<!-- Au moment où la page se télécharge la fonction "load()" charge la carte -->
<body onload="init_map()">
<!-- "map" est l'identifiant du calque qui recevra la carte -->
<div id="my_map" style="width: 500px; height: 300px"></div>
</body>
</html>
|
Explications :
Il faut remarquer qu'avant de poser la propriété du type de carte, if faut placer la propriété "mapTypeControl: true"
Ensuite on déclare la propriété "mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.TYPE DE CARTE}".
"TYPE DE CARTE" peut-être : HORIZONTAL_BAR (bouton en ligne), DROPDOWN_MENU (bouton avec menu déroulant).
Résultat :
HORIZONTAL_BAR
DROPDOWN_MENU
|
|
|
|