| | auteur : NoSmoking |
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 http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[GoogleMaps API V3] Insertion d'une Carte</title>
<style type="text/css">
#div_carte {
height : 600px;
width : 600px;
margin : auto;
border : 1px solid #888;
}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></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, le paramètre sensor=false, obligatoire, indique que la géolocalisation n'est pas active.
- 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(){
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
});
}
google.maps.event.addDomListener( window, 'load', initCarte);
|
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 ;
- mapTypeId : type d'affichage de la carte, c'est une constante de google.maps.MapTypeId.
Cette dernière option (mapTypeId) accepte les constantes suivantes :
- ROADMAP, carte la plus courante avec le plan à plat des routes ;
- SATELLITE, carte sur base d'images satellites ;
- TERRAIN, carte des reliefs ;
- HYBRID, carte satellite avec le plan des routes à plat.
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 type="text/javascript"></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 http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[GoogleMaps API V3] Insertion d'une Carte</title>
<style type="text/css">
#div_carte {
height : 600px;
width : 600px;
margin : auto;
border : 1px solid #888;
}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initCarte(){
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
});
}
google.maps.event.addDomListener( window, 'load', initCarte);
</script>
</head>
<body>
<h1>Titre de la carte</h1>
<div id="div_carte"></div>
</body>
</html>
|
|
| | auteur : NoSmoking |
Pour qu'une carte puisse s'afficher, il faut que son conteneur de destination ait
une hauteur non nulle. C'est pourquoi il faut impérativement préciser une hauteur
à celui-ci.
Exemple :
#div_carte{
width : 600px;
height : 600px;
margin : auto;
}
|
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, il faut encapsuler le conteneur de la carte dans
un conteneur parent.
Exemple :
<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 {
height : 0px;
overflow : hidden;
position : relative;
}
|
 |
La position:relative 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';
|
|
| | auteur : NoSmoking |
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 :
var oMap = new google.maps.Map( document.getElementById( 'div_carte'),{
'center' : new google.maps.LatLng( 46.80, 1.70),
'zoom' : 6,
'zoomControl' : false,
'scrollwheel' : false,
'disableDoubleClickZoom' : true,
'mapTypeId' : google.maps.MapTypeId.ROADMAP
});
|
Méthode #2 :
Fixer le zoom mini et maxi dans les options de la map :
var DEFAULT_ZOOM = 6;
var oMap = new google.maps.Map( document.getElementById( 'div_carte'),{
'center' : new google.maps.LatLng( 46.80, 1.70),
'zoom' : DEFAULT_ZOOM,
'zoomControl' : false,
'minZoom' : DEFAULT_ZOOM,
'maxZoom' : DEFAULT_ZOOM,
'mapTypeId' : google.maps.MapTypeId.ROADMAP
});
|
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.
|
Consultez les autres F.A.Q.
 
|
|
