La classe Map est la classe principale de l’api. Elle sert à instancier et à paramétrer une nouvelle carte. Sur cette page, vous pourrez consulter les méthodes ainsi que les propriétés et les événements liés à la classe map.
Accès rapides
Le constructeur Map
La signature de la méthode permettant de créer la carte Google est la suivante:
Map(mapDiv:Node, opts ? : MapOptions)
Ce constructeur instancie la classe Map en créant une nouvelle carte dans l’élément html déclaré via le paramètre mapDiv. Il s’agit habituellement d’un div.
<script type="text/javascript">
var latlng = new google.maps.LatLng(48.8566667, 2.3509871); // Paris
var options = {
zoom : 7,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var myDiv = document.getElementById('map');
/* Ici, nous déclarons l'élément html ayant pour id "map" comme conteneur de la map */
var map = new google.maps.Map(myDiv,options);
/* Chargement de la carte centrée sur Paris
avec un zoom de 7 et un type ROADMAP */
</script>
fitBounds
La méthode fitBounds permet d’ajuster automatiquement le zoom de la carte afin que celle-ci affiche l’ensemble des markers de la map. Il est nécessaire de déclarer l’objet map avant l’appel à cette méthode.
exemple complet de la méthode fitBounds
<script type="text/javascript">
/* Ici, on ajuste le zoom de la map en fonctions des limites */
map.fitBounds(bounds);
</script>
getBounds
La méthode getBounds permet de récupérer les coordonnées des limites de la carte. C’est-à-dire, les coordonnées du point supérieur droit (nord-est / NE) et du point inférieur gauche (sud-ouest / SW).
La valeur retournée est donc un objet de type LatLngBounds. Si la map n’a pas encore été instanciée (donc si le mapType est nul) ou que le centre et le zoom n’ont pas été définis, le résultat retourné par la méthode sera nul.
<script type="text/javascript">
/* Ici map représente l'objet de type map */
var coordBounds = map.getBounds();
</script>
getCenter
La méthode getCenter permet de récupérer les coordonnées du centre de la carte.
La valeur retournée est un objet de type LatLng, sur lequel on peut alors appliquer les méthodes lat() et lng() pour récupérer les coordonnées géographiques du centre de la map.
<script type="text/javascript">
/* Ici map représente l'objet de type map */
var coordCenter = map.getCenter();
var latCenter = coordCenter.lat();
var lngCenter = coordCenter.lng();
</script>
getDiv
La méthode getDiv appliquée à l’objet map retourne le noeud html contenant notre carte.
Il est ensuite possible de récupérer les informations de cet élément comme montré dans l’exemple ci-dessous.
<script type="text/javascript">
/* Ici map représente l'objet de type map */
var divMap = map.getDiv();
// Récupération de la largeur du div
var widthDiv = divMap.style.width;
// Récupération de l'id du div
var idDiv = divMap.id;
</script>
getMapTypeId
La méthode getMapTypeId permet de récupérer l’ID du type de carte utilisé, à savoir HYBRID, ROADMAP, SATELLITE ou TERRAIN.
<script type="text/javascript">
/* Ici map représente l'objet de type map */
var typeMap = map.getMapTypeId();
</script>
getProjection
La méthode getProjection retourne la projection courante. Si la carte n’est pas encore initialisée (c-à-d si le mapType est toujours nul), alors le résultat sera nul.
Pour s’assurer que la projection n’est pas nulle, il est possible d’écouter l’événement projection_changed.
<script type="text/javascript">
/* Ici map représente l'objet de type map */
var mapProjection = map.getProjection();
// La valeur retournée est un objet de type "Projection"
for(i in mapProjection)
console.log(i+' : '+mapProjection[i]);
Exemple de réponse retournée :
b : (128, 128)
c : 0.7111111111111111
d : 40.74366543152521
fromLatLngToPoint : function (a, b) {
var c = b || new O(0, 0), d = this.b;
c.x = d.x + a.lng() * this.c;
var e = Gc(o.sin(Jc(a.lat())), -0.999999999999999, 0.999999999999999);
c.y = d.y + 0.5 * o.log((1 + e) / (1 - e)) * - this.d;
return c;
}
fromPointToLatLng : function (a, b) {
var c = this.b, d = (a.x - c.x) / this.c;
return new N(Kc(2 * o[Wb](o.exp((a.y - c.y) / - this.d)) - o.PI / 2), d, b);
}
</script>
getStreetView
La méthode getStreetView retourne l’objet de type StreetViewPanorama par défaut lié à la carte, qui peut être un panorama par défaut intégré dans la carte ou le panorama défini à l’aide de la méthode setStreetView().
Modifier le streetViewControl de la map se répercutera dans l’affichage du panorama lié à la carte.
<script type="text/javascript">
/* Ici map représente l'objet de type map */
var mapStreet = map.getStreetView();
// La valeur retournée est un objet de type "StreetViewPanorama"
</script>
getZoom
La méthode getZoom retourne la valeur du zoom de la vue courante.
<script type="text/javascript">
/* Ici map représente l'objet de type map */
var mapZoom = map.getZoom();
// La valeur retournée est un entier
</script>
panBy
La méthode panBy modifie le centre de la carte. Les paramètres attendus sont les valeurs en pixels en abscisses et en ordonnées : panBy(x,y).
À noter qu’une valeur d’abscisse positive fera bouger le centre de la carte vers la droite (de l’ouest vers l’est) et une valeur positive en ordonnée vers le bas (du nord au sud). En d’autres termes, si x et y sont positifs, le centre de la carte se déplacera vers la droite et vers le bas.
Si la distance de déplacement est inférieure à la largeur ET à la longueur de la map, le déplacement se fera progressivement, sinon, la carte sera rechargée intégralement.
<script type="text/javascript">
/* Ici map représente l'objet de type map */
map.panTo(100,100);
// Le centre de la carte se déplacera de 100px vers la droite
et de 100px vers le bas
</script>
panTo
La méthode panTo déplace le centre le carte en se positionnant sur le point (objet de type LatLng) passé en paramètre : panTo(new google.maps.LatLng(lat, lng)).
Si la distance de déplacement est inférieure à la largeur ET à la longueur de la map, le déplacement se fera progressivement, sinon, la carte sera rechargée intégralement.
<script type="text/javascript">
/* Ici map représente l'objet de type map */
map.panTo(new google.maps.LatLng(48.3906042, -4.4869013)); // Brest
// La carte se centre sur Brest.
// Si Brest est inclus dans la vue, le déplacement sera alors progressif.
</script>
panToBounds
La méthode panToBounds ajuste le centre le carte (et de ce fait, le zoom) de manière à ce que celle-ci affiche l’ensemble des points inclus dans l’objet de type de LatLngBounds passé en paramètre : panToBounds(new google.maps.LatLngBounds()), cf exemple ci-dessous.
Si la distance de déplacement est inférieure à la largeur ET à la longueur de la map, le déplacement se fera progressivement, sinon, la carte sera rechargée intégralement.
<script type="text/javascript">
// Considérons un tableau nommé myPoints contenant
// 4 points, objets de type LatLng, ainsi qu'un objet de type map nommé map.
// Cet objet (map) est centré sur un seul point et n'en affiche que 2.
// Déclaration d'un objet de type LatLngBounds
var bounds = new google.maps.LatLngBounds();
// Pour chaque point du tableau, on étend les limites de la carte
// afin que ces derniers soient inclus dans cette limite
for(var i = 0; i < myPoints.length; i++){
bounds.extend(myPoints[i]);
}
// Ici, le zoom va diminuer afin de recentrer la carte en y affichant
// l'ensemble des points de notre tableau (myPoints).
map.panToBounds(new google.maps.LatLngBounds(bounds));
// La carte se recentre de manière à afficher l'ensemble des points.
</script>
setCenter
La méthode setCenter permet de recentrer la carte sur le point (objet de type latlng) passé en paramètre : setCenter(new google.maps.LatLng(lat, lng)).
<script type="text/javascript">
var Brest = new google.maps.LatLng(48.3906042, -4.4869013);
/* Ici map représente l'objet de type map */
map.setCenter(Brest);
// La carte une fois chargée, se centre sur Brest.
</script>
setMapTypeId
La méthode setMapTypeId permet de changer le type de carte utilisé : setMapTypeId(google.maps.mapTypeId.TYPE_DE_CARTE).
<script type="text/javascript">
var MIXTE = google.maps.mapTypeId.HYBRID;
/* Ici map représente l'objet de type map */
map.setMapTypeId(MIXTE);
// Modification du type de carte (ici HYBRID) une fois la carte chargée.
</script>
setOptions
La méthode setOptions permet de modifier les options de la carte courante : setOptions(options : MapOptions).
<script type="text/javascript">
var Brest = new google.maps.LatLng(48.3906042, -4.4869013);
var newOptions = {
zoom : 3,
center: Brest,
mapTypeId: google.maps.MapTypeId.HYBRID
}
/* Ici map représente l'objet de type map */
map.setOptions(newOptions);
// Modification du zoom, du centre et du type de carte (ici HYBRID)
// une fois la carte chargée.
</script>
setStreetView
La méthode setStreetView permet de lier un panorama streetView à la carte : setStreetView(panorama : StreetViewPanorama).
Si un panorama a déjà été chargé sur la carte, ce nouveau panorama écrasera ce dernier. En passant comme paramètre un panorama null, le panorama chargé initialement sur la carte sera de nouveau celui par défaut.
<script type="text/javascript">
var myMap = document.getElementById('map'); // Elément du DOM contenant notre carte
var Paris = new google.maps.LatLng(48.8566667, 2.3509871);
var panoramaOptions = {
position: Paris,
pov: {
heading: 34,
pitch: 10,
zoom: 1
}
};
var street = new google.maps.StreetViewPanorama(myMap,panoramaOptions);
/* Ici map représente l'objet de type map */
map.setStreetView(street);
// Affichage du streetView sur Paris une fois la carte chargée.
Propriétés pov : (orientation de la caméra)
- heading : position en degrés de la caméra par rapport au Nord (0°).
- pitch : hauteur de la caméra par rapport à la rue.
* 0° : horizontal, 90° : vers le haut, -90° : vers la bas
- zoom : niveau du zoom. La valeur 0 correspond au zoom le plus bas.
</script>
setZoom
La méthode setZoom permet de modifier la valeur du zoom de la vue courante : setZoom(zoom).
<script type="text/javascript">
/* Ici map représente l'objet de type map */
map.setZoom(3);
// Modification de la valeur du zoom, ici 3, une fois la carte chargée.
</script>
propriété controls
La propriété controls permet d’ajouter des éléments de contrôle à la carte. La propriété controls est un objet de type MVCArray.
Dans le code ci-dessous, nous ajoutons un type de contrôle personnalisé.
<script type="text/javascript">
// Fonction chargée de créer un objet de contrôle personnalisé
// Voir l'exemple complet pour plus de détail
function myControl(controlDiv, map) {
...
...
}
/* Ici map représente l'objet de type map, notre carte */
var myControlDiv = document.createElement('DIV');
var myControl = new myControl(myControlDiv, map);
myControlDiv.index = 1;
map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(myControlDiv);
// Ajout d'un objet de contrôle sur la carte dans
// le coin inférieur gauche : BOTTOM_LEFT .
</script>
propriété mapTypes
La propriété mapTypes représente un objet de type MapTypeRegistry, qui lui-même est une classe dérivée de la classe MVCObject avec tout ce que cela implique (lecture et écriture des attributs).
L’objet MapTypeRegistry contient l’ensemble des types de cartes disponibles pour la vue utilisée. L’api Google Map consulte cet objet pour connaître les types de cartes disponibles sur la vue en cours lors de l’affichage des panneaux de contrôles par exemple (afin de proposer les boutons adéquats pour switcher entre les différents types de vue).
À l’aide de cette propriété, il est ainsi possible de récupérer les informations liées aux différents types de vue utilisés comme par exemple le maxZoom ou encore le tileSize (c-à-d la taille des tuiles utilisées : 128 x 128, 256 x 256 …) ainsi qu’une multitude d’informations.
Cette propriété peut également être utilisée pour déclarer un type de carte personnalisé car ses attributs sont également accessibles en écriture.
<script type="text/javascript">
/* Ici "map" représente l'objet de type map, notre carte */
var mapTypeProperties = map.mapTypes;
var maxZoomSat = mapTypeProperties['satellite']['maxZoom'];
// ici maxZoomSat contiendra la valeur 22
var altRoadmap = mapTypeProperties['roadmap']['alt'];
// ici altRoadmap contiendra la valeur "Afficher un plan de ville"
</script>
propriété overlayMapTypes
La propriété overlayMapTypes permet de charger différentes couches d’images ou de formes géométriques (personnalisées au besoin) sur une carte.
Ces images peuvent représenter un nouveau type de carte ou des zones géométriques ou encore toutes images de votre choix.
<script type="text/javascript">
/* Déclaration d'un objet de type ImageMapType */
var traffic = new google.maps.ImageMapType({
getTileUrl: function(coord, zoom) {
return "http://mt3.google.com/mapstt?" +
"zoom=" + zoom + "&x=" + coord.x + "&y=" + coord.y + "&client=api";
},
tileSize: new google.maps.Size(256, 256),
isPng: true
});
var map;
/* Initialisation de la map en lui ajoutant une couche de type "traffic" */
function initialize() {
map = new google.maps.Map(document.getElementById("map-canvas"));
map.setCenter(new google.maps.LatLng(37.76, -122.45));
map.setZoom(12);
map.setMapTypeId('satellite');
map.overlayMapTypes.insertAt(0, traffic);
}
</script>
Les événements sur la Map
<script type="text/javascript">
/* Exemple d'utilisation des événements sur la map */
/* Ici, suite à un click sur un marker, un zoom est effectué sur la map. */
google.maps.event.addListener(marker, 'click', function() {
map.setZoom(8);
});
</script>
bounds_changed
Cet événement est déclenché lorsque les limites de la carte changent.
center_changed
Cet événement est déclenché lorsque les propriétés du centre de la carte changent.
click
Cet événement fait partie des événement liés à la souris de l’utilisateur et est déclenché lorsque l’utilisateur clique sur la carte.
NB : sont exclus les clicks sur un marker ou sur une infowindow (fenêtre d'information)
NB : les événements liés à la souris retournent en argument un objet de type latlng
correspondant à la position où se trouve la souris lors de l'action
dblclick
Cet événement fait partie des événement liés à la souris de l’utilisateur et est déclenché lorsque l’utilisateur effectue un double-clique sur la carte.
À noter que l’événement “click” sera également déclenché juste avant.
NB : les événements liés à la souris retournent en argument un objet de type latlng
correspondant à la position où se trouve la souris lors de l'action
drag
Cet événement se répète tant que l’utilisateur déplace la carte.
dragend
Cet événement se déclenche lorsque l’utilisateur cesse de déplacer la carte.
idle
Cet événement est déclenché lorsque la carte devient inactive après un panoramique ou un zoom.
maptypeid_changed
Cet événement est déclenché lorsque le mapTypeId ou ses propriétés changent.
mousemove
Cet événement se répète tant que l’utilisateur déplace sa souris au-dessus de la map.
NB : les événements liés à la souris retournent en argument un objet de type latlng
correspondant à la position où se trouve la souris lors de l'action
mouseout
Cet événement se déclenche dès que la souris de l’utilisateur quitte l’espace défini par la map.
NB : les événements liés à la souris retournent en argument un objet de type latlng
correspondant à la position où se trouve la souris lors de l'action
mouseover
Cet événement se déclenche dès que la souris de l’utilisateur pénètre l’espace défini par la map.
NB : les événements liés à la souris retournent en argument un objet de type latlng
correspondant à la position où se trouve la souris lors de l'action
projection_changed
Cet événement se déclenche lorsque le type de projection change.
resize
Cet événement se déclenche le div contenant la map est redimensionné.
rightclick
Cet événement se déclenche lorsque l’utilisateur effectue un click droit au-dessus de la map.
NB : les événements liés à la souris retournent en argument un objet de type latlng
correspondant à la position où se trouve la souris lors de l'action
tilesloaded
Cet événement se déclenche quand les tuiles apparentes définissant la map ont fini de charger.
zoom_changed
Cet événement se déclenche quand le zoom courant change de valeur.
