FAQ API Google MapsConsultez toutes les FAQ
Nombre d'auteurs : 4, nombre de questions : 31, dernière mise à jour : 23 février 2015
Sommaire→Google Maps→Les cartes- Comment insérer une carte dans ma page ?
- Pourquoi ma carte ne s'affiche pas complètement quand je la rends visible ?
- Comment empêcher le zoom de la carte ?
- Comment affecter/modifier le zoom d'une carte ?
- Comment affecter/modifier le type (aspect) d'une carte ?
- Comment centrer une carte sur un point particulier ?
Il faut au moins une trame HTML :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<title>[GoogleMaps API V3] Insertion d'une Carte</title>
<style>
#div_carte {
height : 600px; /* IMPERATIF */
width : 600px;
margin : auto;
border : 1px solid #888;
}
</style>
<script src="http://maps.googleapis.com/maps/api/js"></script>
</head>
<body>
<h1>Titre de la carte</h1>
<div id="div_carte"></div>
</body>
</html>
Que retrouve-t-on dans ce fichier ?
- En début de fichier on place un DOCTYPE, ici HTML5, afin d'informer le navigateur sur le mode de rendu souhaité.
- Une balise META indiquant que nous sommes en mode plein écran et avec une carte non redimensionnable.
- Une balise STYLE où l'on définit au minimum la hauteur du conteneur devant recevoir la carte, ceci est un impératif.
- Une balise SCRIPT d'insertion du lien vers le code de l'API Google Maps.
- Une balise BODY où l'on trouve :
- un titre éloquent :O) ;
- une DIV qui sera le conteneur dans lequel sera affichée notre carte. La DIV doit posséder un ID afin de pouvoir être référencée.
Maintenant écrivons la fonction permettant de créer la carte.
Pour créer une carte nous utilisons le constructeur google.maps.Map comme suit
function initCarte(){
// création de la carte
var oMap = new google.maps.Map( document.getElementById( 'div_carte'),{
'center' : new google.maps.LatLng( 46.80, 1.70),
'zoom' : 6
});
}
// init lorsque la page est chargée
google.maps.event.addDomListener( window, 'load', initCarte);Ne pas mettre de virgule après la dernière déclaration de propriété.
Explication du code :
1/ Nous créons un objet, ici oMap, de type google.maps.Map, en passant en paramètre :
- l'objet dans lequel celle-ci sera affichée, ici la DIV ayant pour ID "div_carte" ;
- les options retenues pour la carte, les options minimales (obligatoires) à initialiser étant :
- center : position centrale de la carte au format google.maps.LatLng( valeur_latitude, valeur_longitude) ;
- zoom : zoom initial d'affichage. Plus la valeur est petite, moins la carte présente de détails. À titre informatif, au niveau du 45° parallèle, une carte de 600px avec un zoom de 6 fait environ 1050 km de large.
2/ Nous appelons la méthode google.maps.event.addDomListener.
Cette méthode mise à disposition par l'API Google Maps nous permet
de lancer une fonction, ici initCarte, une fois la page chargée.
Cette façon de faire permet de placer d'autres actions sur l'événement load.
Il est à noter que l'on pourrait se passer de cette ligne en mettant le code en
fin de page avant fermeture de la balise BODY.
Il ne nous reste plus qu'à insérer ce code dans la partie HEAD
entre des balises :
<script></script>pour obtenir au final le fichier suivant :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<title>[GoogleMaps API V3] Insertion d'une Carte</title>
<style>
#div_carte {
height : 600px; /* IMPERATIF */
width : 600px;
margin : auto;
border : 1px solid #888;
}
</style>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initCarte(){
// création de la carte
var oMap = new google.maps.Map( document.getElementById( 'div_carte'),{
'center' : new google.maps.LatLng( 46.80, 1.70),
'zoom' : 6
});
}
// init lorsque la page est chargée
google.maps.event.addDomListener( window, 'load', initCarte);
</script>
</head>
<body>
<h1>Titre de la carte</h1>
<div id="div_carte"></div>
</body>
</html>
Pour qu'une carte puisse s'afficher, il faut que son conteneur de destination ait
une hauteur non nulle au moment de son initialisation.
Si le conteneur de la carte possède la propriété CSS display:none,
il est considéré comme ayant une hauteur de 0px.
Au moment de l'affichage de celui-ci, en passant son display à
block, la carte ne sera pas ou incomplètement affichée.
Dans le cas où l'on ne veut afficher la carte qu'après une action utilisateur,
validation sélection ou autre, nous pouvons avoir recours à deux méthodes pour
afficher notre carte correctement.
Méthode #1 :
Nous encapsulons notre carte dans un conteneur parent et jouons sur les dimensions de celui ci.
<div id="cadre_carte">
<div id="div_carte"></div>
</div>
Ici aussi il ne faut pas jouer avec la propriété display sur
le conteneur parent. On utilisera le CSS suivant :
#cadre_carte {
/* display : none; /* A BANNIR dans ce cas */
height : 0;
overflow : hidden;
position : relative; /* pour IE jusqu'à au moins V7 */
}
#div_carte{
height : 600px; /* IMPERATIF */
width : 600px;
margin : auto;
}La position:relative sur le conteneur parent permet à certaines versions de IE de réagir correctement.
Il ne reste plus qu'à afficher la carte en fixant une hauteur au conteneur parent :
document.getElementById('cadre_carte').style.height='600px';
Méthode #2 :
Nous forçons la carte à se redimensionner en utilisant la méthode trigger
de l'objet google.maps.event et en lui passant en paramètre
la référence à la carte et comme nom d'événement resize.
En utilisant le CSS suivant :
#div_carte{
display : none; /* on masque donc l'élément */
height : 600px; /* IMPERATIF */
width : 600px;
margin : auto;
}Il ne reste plus qu'à afficher la carte en passant son display à block et en déclenchant le resize :
// récup du conteneur de la carte
oMap.getDiv().style.display = 'block';
// déclenchement de l'événement resize de la carte
google.maps.event.trigger( oMap, 'resize');
// IMPORTANT! recentrage de la carte la première fois
if( !oMap.get('firstShow')){
oMap.setCenter( oCentre);
oMap.set('firstShow', 1);
}
Nota bene : il est important de recentrer la carte lors du premier affichage.
Pour les réaffichages on gère ici un flag, firstShow, afin de ne
pas avoir à recentrer celle ci à chaque apparition, ce qui permet de
conserver les modifications faites par l'utilisateur.
Le même résultat peut être obtenu sans utilisation de flag de la façon suivante :
// récup du conteneur de la carte
oMap.getDiv().style.display = 'block';
// déclenche l'événement resize de la carte
google.maps.event.trigger( oMap, 'resize');
// recentrage de la carte
oMap.setCenter( oMap.getCenter());Lien : Méthode #1 page exemple
Lien : Méthode #2 page exemple
Il existe au moins deux façons d'y parvenir.
Méthode #1 :
Supprimer la barre de contrôle du zoom. Dans ce cas il faut également désactiver
le zoom via la molette de la souris et le double-clic :
// création de la carte
var oMap = new google.maps.Map( document.getElementById( 'div_carte'),{
'center' : new google.maps.LatLng( 46.80, 1.70),
'zoom' : 6,
'zoomControl' : false, // supprime l'icône de contrôle du zoom
'scrollwheel' : false, // désactive le zoom avec la molette de la souris
'disableDoubleClickZoom' : true // désactive le zoom sur le double-clic
});
Méthode #2 :
Fixer le zoom mini et maxi dans les options de la map :
var DEFAULT_ZOOM = 6; // valeur du zoom souhaité
// création de la carte
var oMap = new google.maps.Map( document.getElementById( 'div_carte'),{
'center' : new google.maps.LatLng( 46.80, 1.70),
'zoom' : DEFAULT_ZOOM,
'zoomControl' : false, // supprime l'icône de contrôle du zoom
'minZoom' : DEFAULT_ZOOM,
'maxZoom' : DEFAULT_ZOOM
});
Nota bene : le fait de mettre un minZoom
et un maxZoom n'empêche pas de fixer un zoom. Dans ce cas,
il est également intéressant d'enlever l'affichage de la barre de contrôle du
zoom, qui ne sert donc plus à rien.
On peut affecter/modifier le zoom de la carte en affectant/modifiant la propriété
zoom de celle-ci.
L'affectation/modification peut se faire de plusieurs manières :
- en affectant la valeur du zoom lors de l'initialisation de la carte, ce qui est obligatoire.
// création de la carte
var oMap = new google.maps.Map( document.getElementById( 'div_carte'),{
'center' : new google.maps.LatLng( 46.80, 1.70),
'zoom' : 16 // réglage du niveau de zoom de la carte sur 16
});
- en utilisant la méthode setZoom() et en passant en paramètre
la valeur du zoom.
oMap.setZoom(16); // réglage du niveau de zoom de la carte sur 16
- en utilisant la méthode setOptions() et en passant en paramètre
un objet contenant les options à modifier sous sa forme littérale.
oMap.setOptions( {'zoom' : 16}); // réglage du niveau de zoom de la carte sur 16
On peut affecter/modifier l'aspect de la carte en affectant/modifiant la propriété
mapTypeId de celle-ci.
Les différents types (aspects) de carte disponibles sont :
- google.maps.MapTypeId.ROADMAP, carte la plus courante avec le plan à plat des routes ;
- google.maps.MapTypeId.SATELLITE, carte sur base d'images satellites ;
- google.maps.MapTypeId.TERRAIN, carte des reliefs ;
- google.maps.MapTypeId.HYBRID, carte satellite avec le plan des routes à plat.
L'affectation/modification peut se faire de plusieurs manières :
- en affectant le type de carte lors de l'initialisation de celle-ci.
// création de la carte
var oMap = new google.maps.Map( document.getElementById( 'div_carte'),{
'center' : new google.maps.LatLng( 46.80, 1.70),
'zoom' : 6,
'mapTypeId' : google.maps.MapTypeId.ROADMAP
});
- en utilisant la méthode setMapTypeId() et en passant en
paramètre un des types de carte disponibles.
oMap.setMapTypeId( google.maps.MapTypeId.SATELLITE);
- en utilisant la méthode setOptions() et en passant en paramètre
un objet contenant les options à modifier sous sa forme littérale.
oMap.setOptions( {'mapTypeId' : google.maps.MapTypeId.SATELLITE});
Pour centrer la carte sur un point particulier, l'objet google.maps.Map dispose de deux méthodes.
1) La méthode setCenter(latLng:LatLng|LatLngLiteral) qui attend en paramètre une position sous forme d'un objet google.maps.LatLng, ou d'un objet google.maps.LatLngLiteral, représentant le nouveau centre de la carte.
Le déplacement s'effectue sans effet de glissement. :
var oLatLng = new google.maps.LatLng( 46.80, 1.70); // position du centre de la carte
// ou autre en utilisant un objet LatLngLiteral
var oLatLng = {'lat': 46.80, 'lng': 1.70}; // position du centre de la carte
oMap.setCenter( oLatLng); // centrage de la carte
2) La méthode panTo(latLng:LatLng|LatLngLiteral) qui attend en paramètre une position sous forme d'un objet google.maps.LatLng, ou d'un objet google.maps.LatLngLiteral, représentant le nouveau centre de la carte.
Si le déplacement est inférieur à la largeur et à la hauteur de la carte, celui ci s'effectuera avec un effet de glissement.
var oLatLng = new google.maps.LatLng( 46.80, 1.70); // position du centre de la carte
// ou autre en utilisant un objet LatLngLiteral
var oLatLng = {'lat': 46.80, 'lng': 1.70}; // position du centre de la carte
oMap.panTo( oLatLng); // centrage de la carteLien : Page exemple