Ensemble de contrôles Google Maps
Google MapsEnsemble de widgets
Une carte Google - Paramètres de l'ensemble de widgets par défaut :
Google Maps - Paramètres du widget par défaut :
Lors de l'utilisation d'une carte Google standard, ses paramètres par défaut sont les suivants :
.Zoom-Affiche un curseur pour contrôler le niveau de zoom de la carte
.PPan-La carte affiche un contrôle en forme de bol à fond plat. Cliquez sur les 4 coins. pour déplacer la carte
.MapType - permet à l'utilisateur de basculer entre les types de carte (feuille de route et satellite)
.StreetView - s'affiche sous forme de L'icône Pegman peut être déplacée vers un certain point de la carte pour ouvrir Street View
Google Maps - Plus de jeux de contrôles
En plus de la valeur par défaut ci-dessus jeux de contrôle, Google a également :
.Scale - Affiche l'échelle de la carte
.Rotate - Affiche une petite icône en forme de cercle pour faire pivoter la carte
.verview Map - Survol de la carte dans une perspective étendue
Lors de la création d'une carte, vous pouvez spécifier quels ensembles de contrôles sont affichés en définissant les options ou en appelant setOptions() Modifiez les paramètres de la carte.
Google Maps - Désactiver l'ensemble de commandes par défaut
Vous souhaiterez peut-être pouvoir désactiver l'ensemble de commandes par défaut.
Pour désactiver le jeu de contrôles par défaut, définissez la propriété DisableDefaultUI de la carte sur true :
Instance
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
function initialize()
{
var mapProp = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:7,
disableDefaultUI:true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>Exécuter l'instance »
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Google Maps - ouvrez tous les ensembles de widgets
Certains ensembles de widgets sont affichés sur la carte par défaut, tandis que les autres ne le seront pas, sauf si vous les définissez.
Définissez le contrôle sur true pour le rendre visible - définissez le contrôle sur false pour le masquer.
Les instances suivantes activent tous les contrôles :
Instance
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
function initialize()
{
var mapProp = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:7,
panControl:true,
zoomControl:true,
mapTypeControl:true,
scaleControl:true,
streetViewControl:true,
overviewMapControl:true,
rotateControl:true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>Exécuter l'instance»
Cliquez sur Exécuter Bouton "Instance" pour afficher une instance en ligne
Google Maps - Modifier l'ensemble de contrôles
Certains contrôles cartographiques sont configurables. Modifiez l'ensemble des contrôles en spécifiant les champs d'options de contrôle.
F Par exemple, les options de modification du contrôle Zoom sont spécifiées dans zoomControlOptions. zoomControlOptions contient les 3 options suivantes :
.google.maps.ZoomControlStyle.SMALL - Afficher le contrôle de zoom réduit
.google.maps. .LARGE - Affiche les commandes de zoom standard
.google.maps.ZoomControlStyle.DEFAULT - Sélectionne la commande la plus appropriée en fonction de l'appareil et de la taille de la carte
Instance
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
function initialize()
{
var mapProp = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:7,
zoomControl:true,
zoomControlOptions: {
style:google.maps.ZoomControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Remarque : Si vous devez modifier un contrôle, activez d'abord le contrôle (définissez-le sur true).
L'autre contrôle est le contrôle MapType.
Le contrôle MapType peut être affiché comme l'une des options de style suivantes :
google.maps.MapTypeControlStyle.HORIZONTAL_BAR, utilisé pour afficher un groupe de contrôles dans une barre horizontale en tant que tel bouton affiché dans Google Maps.
google.maps.MapTypeControlStyle.DROPDOWN_MENU, affiche un contrôle à bouton unique qui vous permet de sélectionner un type de carte dans un menu déroulant.
google.maps.MapTypeControlStyle.DEFAULT, utilisé pour afficher le comportement "par défaut", qui dépend de la taille de l'écran et peut changer dans les futures versions de l'API.
Instance
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
function initialize()
{
var mapProp = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:7,
mapTypeControl:true,
mapTypeControlOptions: {
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
De même, vous pouvez utiliser la propriété ControlPosition pour spécifier la position du contrôle :
Instance
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
function initialize()
{
var mapProp = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:7,
mapTypeControl:true,
mapTypeControlOptions: {
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position:google.maps.ControlPosition.TOP_CENTER
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>Exécuter l'instance »
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Google Maps - Ensemble de contrôles personnalisés
Créez un contrôle personnalisé pour revenir à Londres, pour l'événement clic : (Si la carte est déplacée) :
Instance
<html>
<head>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
var map;
var london = new google.maps.LatLng(51.508742,-0.120850);
// Add a Home control that returns the user to London
function HomeControl(controlDiv, map) {
controlDiv.style.padding = '5px';
var controlUI = document.createElement('div');
controlUI.style.backgroundColor = 'yellow';
controlUI.style.border='1px solid';
controlUI.style.cursor = 'pointer';
controlUI.style.textAlign = 'center';
controlUI.title = 'Set map to London';
controlDiv.appendChild(controlUI);
var controlText = document.createElement('div');
controlText.style.fontFamily='Arial,sans-serif';
controlText.style.fontSize='12px';
controlText.style.paddingLeft = '4px';
controlText.style.paddingRight = '4px';
controlText.innerHTML = '<b>Home<b>'
controlUI.appendChild(controlText);
// Setup click-event listener: simply set the map to London
google.maps.event.addDomListener(controlUI, 'click', function() {
map.setCenter(london)
});
}
function initialize() {
var mapDiv = document.getElementById('googleMap');
var myOptions = {
zoom: 12,
center: london,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(mapDiv, myOptions);
// Create a DIV to hold the control and call HomeControl()
var homeControlDiv = document.createElement('div');
var homeControl = new HomeControl(homeControlDiv, map);
// homeControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(homeControlDiv);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton "Exécuter l'instance" pour afficher un exemple en ligne
Google Maps - Manuel de référence de l'ensemble de contrôles
Manuel de référence de l'API Google Maps.
