La version 2 de l'API Maps JavaScript n'est plus disponible depuis le 26 mai 2021. Par conséquent, les cartes v2 de votre site ne fonctionneront plus et renverront des erreurs JavaScript. Pour continuer à utiliser les cartes sur votre site, migrez vers l'API Maps JavaScript v3. Ce guide vous guidera tout au long du processus.
Présentation
Le processus de migration de chaque application est légèrement différent. Toutefois, certaines étapes sont communes à tous les projets:
- Obtenez une nouvelle clé. L'API Maps JavaScript utilise désormais la console Google Cloud pour gérer les clés. Si vous utilisez encore une clé v2, assurez-vous d'obtenir votre nouvelle clé API avant de commencer la migration.
- Mettez à jour l'amorçage de votre API. La plupart des applications chargent l'API Maps JavaScript v3 avec le code suivant:
<script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
- Modifiez votre code. Le volume de modifications nécessaire dépendra beaucoup de votre application. Voici quelques modifications courantes :
- Faites toujours référence à l'espace de noms google.maps. Dans la version 3, tout le code de l'API Maps JavaScript est stocké dans l'espace de noms
google.maps.*
au lieu de l'espace de noms global. La plupart des objets ont également été renommés dans le cadre de ce processus. Par exemple, au lieu de GMap2
, vous allez maintenant charger google.maps.Map
.
- Supprimez toutes les références à des méthodes obsolètes. Un certain nombre de méthodes utilitaires à usage général ont été supprimées, telles que
GDownloadURL
et GLog
.
Remplacez cette fonctionnalité par des bibliothèques d'utilitaires tierces ou supprimez ces références de votre code.
- (Facultatif) Ajoutez des bibliothèques à votre code. De nombreuses fonctionnalités ont été externalisées dans des bibliothèques d'utilitaires afin que chaque application n'ait à charger que les parties de l'API qui seront utilisées.
- (Facultatif) Configurez votre projet pour utiliser les externs v3.
Les externs v3 peuvent être utilisés pour valider votre code avec Closure Compiler ou pour déclencher la saisie semi-automatique dans votre IDE.
Apprenez-en plus sur la
compilation avancée et les externs.
- Testez et itérez. À ce stade, il vous reste du travail, mais la bonne nouvelle est que vous serez sur la bonne voie pour utiliser la nouvelle version de votre application Maps v3.
Modifications apportées à la version 3 de l'API Maps JavaScript
Avant de planifier votre migration, vous devez prendre le temps de comprendre les différences entre l'API Maps JavaScript v2 et l'API Maps JavaScript v3. La dernière version de l'API Maps JavaScript a été entièrement conçue. Elle met l'accent sur les techniques de programmation JavaScript modernes, l'utilisation accrue des bibliothèques et une API simplifiée.
De nombreuses nouvelles fonctionnalités ont été ajoutées à l'API, et plusieurs fonctionnalités familières ont été modifiées, voire supprimées. Cette section met en évidence certaines des principales différences entre les deux versions.
Changements apportés à la version 3 de l'API :
- Une bibliothèque centrale simplifiée. Un grand nombre des fonctions supplémentaires ont été déplacées dans des bibliothèques, ce qui permet de réduire les temps de chargement et d'analyse de l'API Core, ce qui permet à votre carte de se charger rapidement sur n'importe quel appareil.
- Amélioration des performances de plusieurs fonctionnalités, telles que le rendu des polygones et le placement des repères.
- Nouvelle approche des limites d'utilisation côté client pour mieux gérer les adresses partagées utilisées par les proxys mobiles et les pare-feu d'entreprise.
- Ajout de la compatibilité avec plusieurs navigateurs récents et navigateurs mobiles. Internet Explorer 6 n'est plus pris en charge.
- Suppression de nombreuses classes d'assistance à usage général (
GLog
ou
GDownloadUrl
). Il existe aujourd'hui de nombreuses excellentes bibliothèques JavaScript offrant des fonctionnalités similaires, telles que Closure ou jQuery.
- Une implémentation HTML5 de Street View qui se chargera sur n'importe quel appareil mobile.
- Des panoramas Street View personnalisés contenant vos propres photos, qui vous permettent de partager des panoramas de pistes de ski, de maisons à vendre ou d'autres lieux intéressants.
- Les personnalisations des cartes avec styles vous permettent de modifier l'affichage des éléments sur la carte de base pour l'adapter à votre style visuel unique.
- Prise en charge de plusieurs nouveaux services, tels que ElevationService et Distance Matrix.
- Un service d'itinéraire amélioré propose des itinéraires alternatifs, l'optimisation des itinéraires (solutions approximatives au
problème des commerciaux itinérants), des itinéraires à vélo (avec un
calque À vélo), des itinéraires en transports en commun et des
itinéraires déplaçables.
- Mise à jour du format Geocoding, qui fournit des informations de type plus précises que la valeur
accuracy
de la version 2 de l'API Geocoding.
- Prise en charge de plusieurs fenêtres d'informations sur une même carte.
Mettre à jour votre application
Votre nouvelle clé
La version 3 de l'API Maps JavaScript utilise un nouveau système de clés de la version 2. Vous utilisez peut-être déjà une clé v3 avec votre application. Dans ce cas, aucune modification n'est nécessaire. Pour le vérifier, vérifiez l'URL à partir de laquelle vous chargez l'API Maps JavaScript pour son paramètre key
. Si la valeur de la clé commence par "ABQIAA", cela signifie que vous utilisez une clé en version 2. Si vous disposez d'une clé v2, vous devez passer à une clé v3 dans le cadre de la migration, ce qui:
La clé est transmise lors du chargement de la version 3 de l'API Maps JavaScript.
Découvrez comment générer des clés API.
Notez que si vous êtes un client des API Google Maps for Work, vous pouvez utiliser un ID client avec le paramètre client
au lieu du paramètre key
. Les ID client sont toujours acceptés dans la version 3 de l'API Maps JavaScript. Vous n'avez donc pas besoin de passer par le processus de mise à niveau de la clé.
Charger l'API
La première modification à apporter à votre code concerne le chargement de l'API. Dans la version 2, vous chargez l'API Maps JavaScript via une requête envoyée à http://maps.google.com/maps
. Si vous chargez la version 3 de l'API Maps JavaScript, vous devez apporter les modifications suivantes:
- Charger l'API depuis
//maps.googleapis.com/maps/api/js
- Supprimez le paramètre
file
.
- Mettez à jour le paramètre
key
avec votre nouvelle clé v3. Les clients des API Google Maps for Work doivent utiliser un paramètre client
.
- (Forfait Premium Google Maps Platform uniquement) Assurez-vous que le paramètre
client
est fourni comme expliqué dans le
guide du développeur du forfait Premium Google Maps Platform.
- Supprimez le paramètre
v
pour demander la dernière version publiée ou modifiez sa valeur en fonction du schéma de gestion des versions v3.
- (Facultatif) Remplacez le paramètre
hl
par language
et conservez sa valeur.
- (Facultatif) Ajoutez un paramètre
libraries
pour charger des bibliothèques facultatives.
Dans le cas le plus simple, l'amorçage v3 ne spécifiera que le paramètre de clé API:
<script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
L'exemple ci-dessous demande la dernière version de l'API Maps JavaScript v2 en allemand:
<script src="//maps.google.com/maps?file=api&v=2.x&key=YOUR_API_KEY&hl=de"></script>
L'exemple ci-dessous est une requête équivalente pour la version 3.
<script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&language=de"></script>
Présentation de l'espace de noms google.maps
Le changement le plus notable dans la version 3 de l'API Maps JavaScript est probablement l'introduction de l'espace de noms google.maps
. L'API v2 place tous les objets dans l'espace de noms global par défaut, ce qui peut entraîner des conflits de noms. Dans la version 3, tous les objets se trouvent dans l'espace de noms google.maps
.
Lors de la migration de votre application vers la version 3, vous devrez modifier votre code pour utiliser le nouvel espace de noms. Malheureusement, rechercher "G" et le remplacer par "google.maps." ne fonctionnera pas complètement. Toutefois, il s'agit d'une bonne pratique à appliquer lorsque vous examinez votre code. Vous trouverez ci-dessous quelques exemples de classes équivalentes dans les versions 2 et 3.
v2 |
v3 |
GMap2 |
google.maps.Map |
GLatLng |
google.maps.LatLng |
GInfoWindow |
google.maps.InfoWindow |
GMapOptions |
google.map.MapOptions |
G_API_VERSION |
google.maps.version |
GPolyStyleOptions |
google.maps.PolygonOptions or
google.maps.PolylineOptions |
Supprimer le code Google obsolète
L'API Maps JavaScript v3 propose des parallèles pour la plupart des fonctionnalités de la version 2. Cependant, certaines classes ne sont plus compatibles. Dans le cadre de votre migration, vous devez soit remplacer ces classes par des bibliothèques d'utilitaires tierces, soit supprimer ces références de votre code. Il existe de nombreuses bibliothèques JavaScript qui offrent des fonctionnalités similaires, telles que Closure ou jQuery.
Les classes suivantes n'ont pas de parallèle dans l'API Maps JavaScript v3:
GBounds | GLanguage |
GBrowserIsCompatible | GLayer |
GControl | GLog |
GControlAnchor | GMercatorProjection |
GControlImpl | GNavLabelControl |
GControlPosition | GObliqueMercator |
GCopyright | GOverlay |
GCopyrightCollection | GPhotoSpec |
GDownloadUrl | GPolyEditingOptions |
GDraggableObject | GScreenOverlay |
GDraggableObjectOptions | GStreetviewFeatures |
GFactualGeocodeCache | GStreetviewLocation |
GGeoAddressAccuracy | GStreetviewOverlay |
GGeocodeCache | GStreetviewUserPhotosOptions |
GGoogleBar | GTileLayerOptions |
GGoogleBarAdsOptions | GTileLayerOverlayOptions |
GGoogleBarLinkTarget | GTrafficOverlayOptions |
GGoogleBarListingTypes | GUnload |
GGoogleBarOptions | GXml |
GGoogleBarResultList | GXmlHttp |
GInfoWindowTab | GXslt |
GKeyboardHandler |
|
Comparer le code
Comparons deux applications plutôt simples qui ont été écrites avec les API v2 et v3.
<!DOCTYPE html>
<html>
<head>
<script src="//maps.google.com/maps?file=api&v=2&key=YOUR_API_KEY"></script>
<style>
html, body, #map { height: 100%; margin: 0; }
</style>
<script>
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(
document.getElementById('map'));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
map.setUIToDefault();
map.addOverlay(new GMarker(new GLatLng(37.4419, -122.1419)));
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="//maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
<style>
html, body, #map { height: 100%; margin: 0; }
</style>
<script>
function initialize() {
var map = new google.maps.Map(
document.getElementById('map'), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: new google.maps.LatLng(37.4419, -122.1419),
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
Comme vous pouvez le constater, il existe plusieurs différences entre les deux applications. Les changements notables sont les suivants :
- L'adresse à partir de laquelle l'API est chargée a été modifiée.
- Les méthodes
GBrowserIsCompatible()
et GUnload()
ne sont plus nécessaires dans la version 3 et ont été supprimées de l'API.
- L'objet
GMap2
est remplacé par google.maps.Map
comme objet central dans l'API.
- Les propriétés sont désormais chargées via les classes Options. Dans l'exemple ci-dessus, nous définissons les trois propriétés requises pour charger une carte (
center
, zoom
et mapTypeId
) via un objet MapOptions
intégré.
- L'interface utilisateur par défaut est activée par défaut dans la version 3. Vous pouvez désactiver cela en définissant la propriété
disableDefaultUI
sur "true" dans l'objet MapOptions
.
Résumé
À ce stade, vous avez eu un avant-goût de certains des points clés de la migration de la v2 à la v3 de l'API Maps JavaScript.
Vous aurez peut-être besoin d'autres informations, mais cela dépendra de votre application. Dans les sections suivantes, nous avons inclus des instructions de migration pour les cas spécifiques que vous pouvez rencontrer. Plusieurs ressources peuvent également vous être utiles lors du processus de mise à niveau.
Si vous rencontrez des problèmes ou si vous avez des questions concernant cet article, veuillez utiliser le lien ENVOYER DES COMMENTAIRES en haut de cette page.
Cette section fournit une comparaison détaillée des fonctionnalités les plus populaires des versions 2 et 3 de l'API Maps JavaScript. Chaque section de la référence est conçue pour être lue individuellement. Nous vous recommandons de ne pas lire cette référence dans son intégralité. Utilisez plutôt ces ressources pour faciliter votre migration au cas par cas.
- Événements : enregistrement et gestion des événements.
- Commandes : manipulation des commandes de navigation qui apparaissent sur la carte.
- Superpositions : ajoutez et modifiez des objets sur la carte.
- Types de carte : tuiles qui constituent la carte de base.
- Calques : ajout et modification de contenu en tant que groupe, tels que des calques KML ou Trafic.
- Services : utilisez les services de geocoding, d'itinéraire ou Street View de Google.
Événements
Le modèle d'événement de la version 3 de l'API Maps JavaScript est semblable à celui de la version 2, bien que de nombreuses modifications aient été apportées en arrière-plan.
Nouvel événement pour la prise en charge MVC
L'API v3 ajoute un nouveau type d'événement pour refléter les changements d'état MVC. Il existe désormais deux types d'événements:
- Les événements utilisateur (tels que les événements de souris "clic") sont propagés du DOM vers l'API Maps JavaScript. Ils sont distincts des événements standards du DOM.
- Les notifications de changement d'état MVC reflètent les modifications apportées aux objets de l'API Google Maps et sont nommées selon la convention
property_changed
.
Chaque objet Maps API exporte un certain nombre d'événements nommés. Les applications intéressées par des événements spécifiques doivent enregistrer des écouteurs d'événements pour ces événements et exécuter du code lorsqu'ils sont reçus. Ce mécanisme basé sur les événements est le même dans les versions 2 et 3 de l'API Maps JavaScript, si ce n'est que l'espace de noms est passé de GEvent
à google.maps.event
:
GEvent.addListener(map, 'click', function() {
alert('You clicked the map.');
});
google.maps.event.addListener(map, 'click', function() {
alert('You clicked the map.');
});
Supprimer des écouteurs d'événement
Pour des raisons de performances, il est préférable de supprimer un écouteur d'événements lorsqu'il n'est plus nécessaire. La suppression d'un écouteur d'événements fonctionne de la même manière dans les versions 2 et 3:
- Lorsque vous créez un écouteur d'événements, un objet opaque (GEventListener dans la version 2, MapsEventListener dans la version 3) est renvoyé.
- Lorsque vous souhaitez supprimer l'écouteur d'événements, transmettez cet objet à la méthode
removeListener()
(GEvent.removeListener()
dans la version 2 ou google.maps.event.removeListener()
dans la version 3) afin de supprimer l'écouteur d'événements.
Écouter les événements DOM
Si vous souhaitez capturer des événements du DOM (Document Object Model) et y répondre, la version 3 fournit la méthode statique google.maps.event.addDomListener()
, équivalente à la méthode GEvent.addDomListener()
dans la version 2.
Utiliser des arguments transmis dans des événements
Les événements d'interface utilisateur transmettent souvent un argument d'événement auquel l'écouteur d'événements peut ensuite accéder. Dans la version 3, la plupart des arguments d'événement ont été simplifiés pour être plus cohérents avec les objets de l'API. (Pour en savoir plus, consultez la documentation de référence de la v3.)
Aucun argument overlay
n'existe dans les écouteurs d'événements v3. Si vous enregistrez un événement click
sur une carte v3, le rappel n'est effectué que lorsque l'utilisateur clique sur la carte de base. Vous pouvez enregistrer des rappels supplémentaires sur les superpositions cliquables si vous devez réagir à ces clics.
// Passes an overlay argument when clicking on a map
var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(-25.363882, 131.044922), 4);
map.setUIToDefault();
GEvent.addListener(map,'click', function(overlay, latlng) {
if (latlng) {
var marker = new GMarker(latlng);
map.addOverlay(marker);
}
});
// Passes only an event argument
var myOptions = {
center: new google.maps.LatLng(-25.363882, 131.044922),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'),
myOptions);
google.maps.event.addListener(map, 'click', function(event) {
var marker = new google.maps.Marker({
position: event.latLng,
map: map
});
});
Contrôles
L'API Maps JavaScript affiche des commandes d'interface utilisateur qui permettent aux utilisateurs d'interagir avec votre carte. Vous pouvez utiliser l'API pour personnaliser l'affichage de ces commandes.
Modifications des types de commande
Certaines modifications apportées aux types control
ont été introduites avec l'API v3.
- La version 3 de l'API est compatible avec d'autres types de carte, y compris des cartes de relief et la possibilité d'ajouter des types de carte personnalisés.
- La commande hiérarchique v2,
GHierarchicalMapTypeControl
, n'est plus disponible.
Vous pouvez obtenir un effet similaire en utilisant la commande google.maps.MapTypeControlStyle.HORIZONTAL_BAR
.
- La mise en page horizontale fournie par
GMapTypeControl
dans la version 2 n'est pas disponible dans la version 3.
Ajouter des commandes à la carte
Avec l'API Maps JavaScript v2, vous auriez ajouté des commandes à votre carte via la méthode addControl()
de votre objet de carte. Dans la version 3, au lieu d'accéder aux commandes ou de les modifier directement, vous devez modifier l'objet MapOptions
associé. L'exemple ci-dessous montre comment personnaliser la carte pour ajouter les commandes suivantes:
- des boutons permettant à l'utilisateur de naviguer entre les types de carte disponibles
- une échelle de carte
var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(-25.363882, 131.044922), 4);
// Add controls
map.addControl(new GMapTypeControl());
map.addControl(new GScaleControl());
var myOptions = {
center: new google.maps.LatLng(-25.363882, 131.044922),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP,
// Add controls
mapTypeControl: true,
scaleControl: true
};
var map = new google.maps.Map(document.getElementById('map'),
myOptions);
Positionner des commandes sur la carte
Le positionnement des commandes a fait l'objet d'importantes modifications dans la version 3 de l'API. Dans la version 2, la méthode addControl()
utilise un deuxième paramètre facultatif qui vous permet de spécifier la position de la commande par rapport aux angles de la carte.
Dans la version 3, vous définissez la position d'une commande via la propriété position
des options de commande. Le positionnement de ces commandes n'est pas absolu. Au lieu de cela, l'API les affiche de manière intelligente autour des éléments existants sur la carte, en respectant certaines contraintes (telles que la taille de la carte).
Cela permet de veiller à ce que les commandes par défaut soient compatibles avec vos commandes.
Pour en savoir plus, consultez la section Positionnement des commandes dans la version 3.
Le code suivant modifie la position des commandes fournies dans les exemples précédents :
var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(-25.363882, 131.044922), 4);
// Add map type control
map.addControl(new GMapTypeControl(), new GControlPosition(
G_ANCHOR_TOP_LEFT, new GSize(10, 10)));
// Add scale
map.addControl(new GScaleControl(), new GControlPosition(
G_ANCHOR_BOTTOM_RIGHT, new GSize(20, 20)));
var myOptions = {
center: new google.maps.LatLng(-25.363882, 131.044922),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP,
// Add map type control
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP_LEFT
},
// Add scale
scaleControl: true,
scaleControlOptions: {
position: google.maps.ControlPosition.BOTTOM_RIGHT
}
};
var map = new google.maps.Map(document.getElementById('map'),
myOptions);
Commandes personnalisées
L'API Maps JavaScript vous permet de créer des commandes de navigation personnalisées.
Pour personnaliser des commandes avec la version 2 de l'API, vous devez sous-classer la classe GControl
et définir des gestionnaires pour les méthodes initialize()
et getDefaultPosition()
.
Il n'existe pas d'équivalent à la classe GControl
dans la version 3. Au lieu de cela, les commandes sont représentées par des éléments DOM. Pour ajouter une commande personnalisée avec l'API v3, créez une structure DOM pour la commande dans un constructeur en tant qu'enfant d'un Node
(par exemple, un élément <div>
) et ajoutez des écouteurs d'événements pour gérer tous les événements DOM. Transférez Node
dans le tableau controls[position]
de la carte pour ajouter une instance de la commande personnalisée à votre carte.
Étant donné une implémentation de la classe HomeControl
conforme aux exigences d'interface mentionnées ci-dessus (consultez la documentation sur les commandes personnalisées pour en savoir plus), les exemples de code suivants montrent comment ajouter une commande personnalisée à une carte.
map.addControl(new HomeControl(),
GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(10, 10)));
var homeControlDiv = document.createElement('DIV');
var homeControl = new HomeControl(homeControlDiv, map);
map.controls[google.maps.ControlPosition.TOP_RIGHT].push(
homeControlDiv);
Superpositions
Les superpositions reflètent des objets que vous "ajoutez" à la carte pour désigner des points, des lignes, des zones ou des ensembles d'objets.
Ajouter et supprimer des superpositions
Les types d'objets représentés par une superposition sont identiques dans les versions 2 et 3. Toutefois, ils sont gérés différemment.
Dans la version 2 de l'API, les superpositions ont été ajoutées à la carte et supprimées de celle-ci à l'aide des méthodes addOverlay()
et removeOverlay()
de l'objet GMap2
. Dans la version 3, vous attribuez une carte à une superposition via la propriété map
de la classe d'options de superposition associée.
Vous pouvez également ajouter ou supprimer une superposition directement en appelant la méthode setMap()
de l'objet de superposition et en spécifiant la carte souhaitée. Définir la propriété de carte sur null
supprime la superposition.
Aucune méthode clearOverlays()
n'existe dans la version 3.
Si vous souhaitez gérer un ensemble de superpositions, vous devez créer un tableau pour les stocker. À l'aide de ce tableau, vous pouvez ensuite appeler setMap()
sur chaque superposition du tableau (en transmettant null
si vous devez les supprimer).
Marqueurs déplaçables
Par défaut, les marqueurs sont cliquables, mais pas déplaçables. Les deux exemples suivants ajoutent un repère déplaçable:
var myLatLng = new GLatLng(-25.363882, 131.044922);
var map = new GMap2(document.getElementById('map'));
map.setCenter(myLatLng, 4);
var marker = new GMarker(latLng, {
draggable: true
});
map.addOverlay(marker);
var myLatLng = new google.maps.LatLng(-25.363882, 131.044922);
var map = new google.maps.Map(
document.getElementById('map'), {
center: myLatLng,
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: myLatLng,
draggable: true,
map: map
});
Icônes
Vous pouvez définir une icône personnalisée à afficher à la place du marqueur par défaut.
Pour utiliser une image personnalisée dans la version 2, vous pouvez créer une instance GIcon
à partir de G_DEFAULT_ICON type
, puis la modifier. Si votre image est plus grande ou plus petite que l'icône par défaut, vous devez la spécifier avec une instance GSize
.
La version 3 de l'API simplifie légèrement ce processus.
Il vous suffit de définir la propriété icon
du repère sur l'URL de votre image personnalisée, et l'API redimensionne automatiquement l'icône.
L'API Maps JavaScript est également compatible avec les icônes complexes.
Une icône complexe peut inclure plusieurs tuiles et formes complexes, ou spécifier "l'ordre d'empilement" des images par rapport aux autres superpositions. Pour ajouter une forme à un repère dans la version 2, vous devez spécifier la propriété supplémentaire dans chaque instance GIcon
et la transmettre en tant qu'option à un constructeur GMarker
. Dans la version 3, les icônes spécifiées de cette manière doivent définir leurs propriétés icon
sur un objet de type Icon
.
Les ombres de marqueur ne sont pas prises en charge dans le version 3.
Les exemples suivants présentent un drapeau de plage sur la plage de Bondi, en Australie. Il n'est pas possible de cliquer sur la partie transparente de l'icône:
var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(-25.363882, 131.044922), 4);
map.setUIToDefault();
var flagIcon = new GIcon(G_DEFAULT_ICON);
flagIcon.image = '/images/beachflag.png';
flagIcon.imageMap = [1, 1, 1, 20, 18, 20, 18 , 1];
var bbLatLng = new GLatLng(-33.890542, 151.274856);
map.addOverlay(new GMarker(bbLatLng, {
icon: flagIcon
}));
var map = new google.maps.Map(
document.getElementById('map'), {
center: new google.maps.LatLng(-25.363882, 131.044922),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var shape = {
coord: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
};
var bbLatLng = new google.maps.LatLng(-33.890542, 151.274856);
var bbMarker = new google.maps.Marker({
icon: '/images/beachflag.png'
shape: shape,
position: bbLatLng,
map: map
});
Polylignes
Une polyligne est constituée d'un tableau de valeurs LatLng
et d'une série de segments de lignes, qui relient ces points géographiques dans une séquence ordonnée.
La création et l'affichage d'un objet Polyline
dans la version 3 sont semblables à l'utilisation d'un objet GPolyline
dans la version 2. Les exemples suivants tracent une polyligne géodésique semi-transparente de 3 pixels de large de Zurich à Sydney en passant par Singapour:
var polyline = new GPolyline(
[
new GLatLng(47.3690239, 8.5380326),
new GLatLng(1.352083, 103.819836),
new GLatLng(-33.867139, 151.207114)
],
'#FF0000', 3, 0.5, {
geodesic: true
});
map.addOverlay(polyline);
var polyline = new google.maps.Polyline({
path: [
new google.maps.LatLng(47.3690239, 8.5380326),
new google.maps.LatLng(1.352083, 103.819836),
new google.maps.LatLng(-33.867139, 151.207114)
],
strokeColor: '#FF0000',
strokeOpacity: 0.5,
strokeWeight: 3,
geodesic: true
});
polyline.setMap(map);
Polylignes encodées
Dans la version 3, il n'est pas possible de créer des objets Polyline
directement à partir de polylignes encodées. Au lieu de cela, la bibliothèque de géométrie fournit des méthodes pour encoder et décoder les polylignes. Pour savoir comment charger cette bibliothèque, consultez Bibliothèques dans la version 3 de l'API Google Maps.
Les exemples ci-dessous dessinent la même polyligne encodée. Le code v3 utilise la méthode decodePath()
de l'espace de noms google.maps.geometry.encoding
.
var polyline = new GPolyline.fromEncoded({
points: 'kwb`Huqbs@ztzwGgvpdQbw}uEoif`H',
levels: 'PPP',
zoomFactor: 2,
numLevels: 18,
color: '#ff0000',
opacity: 0.8,
weight: 3
});
map.addOverlay(polyline);
var polyline = new google.maps.Polyline({
path: google.maps.geometry.encoding.decodePath(
'kwb`Huqbs@ztzwGgvpdQbw}uEoif`H'),
strokeColor: '#FF0000',
strokeOpacity: 0.5,
strokeWeight: 3,
});
polyline.setMap(map);
Polygones
Un polygone définit une région dans une boucle fermée. Tout comme l'objet Polyline
, les objets Polygon
sont constitués d'une série de points dans une séquence ordonnée. La classe Polygon
v3 est très semblable à la classe GPolygon
v2, à une exception près : vous n'avez plus besoin de répéter le sommet de départ à la fin du chemin pour fermer la boucle. La version 3 de l'API ferme automatiquement tous les polygones en dessinant un trait qui relie la dernière coordonnée à la première. Les extraits de code suivants créent un polygone représentant le triangle des Bermudes:
var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(24.886436, -70.268554), 5);
var bermudaTriangle = new GPolygon(
[
new GLatLng(25.774252, -80.190262),
new GLatLng(18.466465, -66.118292),
new GLatLng(32.321384, -64.75737),
new GLatLng(25.774252, -80.190262)
],
'#FF0000', 2, 0.8, '#FF0000', 0.35);
map.addOverlay(bermudaTriangle);
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(24.886436, -70.268554),
mapTypeId: google.maps.MapTypeId.TERRAIN,
zoom: 5
});
var bermudaTriangle = new google.maps.Polygon({
paths: [
new google.maps.LatLng(25.774252, -80.190262),
new google.maps.LatLng(18.466465, -66.118292),
new google.maps.LatLng(32.321384, -64.75737)
],
strokeColor: '#FF0000',
strokeWeight: 2,
strokeOpacity: 0.8,
fillColor: '#FF0000',
fillOpacity: 0.35
});
bermudaTriangle.setMap(map);
Formes modifiables par l'utilisateur
Les polylignes et les polygones peuvent être créés de manière à être modifiables par l'utilisateur. Les extraits de code suivants sont équivalents:
map.addOverlay(polyline);
polyline.enableEditing();
polyline.setMap(map);
polyline.setEditable(true);
Pour des fonctionnalités de dessin plus avancées, consultez la bibliothèque de dessins dans la documentation de la version 3.
Fenêtres d'informations
Un InfoWindow
affiche le contenu dans une fenêtre flottante au-dessus de la carte. Il y a plusieurs différences importantes entre les fenêtres d'info de la version 2 et de la version 3 :
- La version 2 de l'API n'accepte que les
GInfoWindow
par carte, tandis que la version 3 accepte plusieurs InfoWindow
simultanés sur chaque carte.
- La version 3 de
InfoWindow
reste ouverte lorsque vous cliquez sur la carte. La version 2 de GInfoWindow
se ferme automatiquement lorsque vous cliquez sur la carte. Vous pouvez émuler le comportement de la version 2 en ajoutant un écouteur click
au niveau de l'objet Map
.
- L'API v3 n'offre pas de compatibilité native avec un
InfoWindow
à onglets.
Superpositions au sol
Pour placer une image sur une carte, vous devez utiliser un objet GroundOverlay
. Le constructeur d'une GroundOverlay
est essentiellement le même dans les versions 2 et 3: il spécifie l'URL d'une image et les limites de l'image en tant que paramètres.
L'exemple suivant place une carte ancienne de Newark, New Jersey, sur la carte en tant que superposition:
var bounds = new GLatLngBounds(
new GLatLng(40.716216, -74.213393),
new GLatLng(40.765641, -74.139235));
var overlay = new GGroundOverlay(
'http://lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
bounds);
map.addOverlay(overlay);
var bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(40.716216, -74.213393),
new google.maps.LatLng(40.765641, -74.139235));
var overlay = new google.maps.GroundOverlay(
'http://lib.utexas.edu/maps/historical/newark_nj_1922.jpg',
bounds);
overlay.setMap(map);
Types de carte
Les types de cartes disponibles dans les versions 2 et 3 sont légèrement différents, mais tous les types de carte de base sont disponibles dans les deux versions de l'API. Par défaut, la version 2 utilise des tuiles de carte routière "peintes" standards. Cependant, la version 3 exige qu'un type de carte spécifique soit indiqué lors de la création d'un objet google.maps.Map
.
Types de carte courants
Les quatre types de carte basiques sont disponibles dans les versions 2 et 3 :
MapTypeId.ROADMAP
(remplace G_NORMAL_MAP
) affiche la carte routière.
MapTypeId.SATELLITE
(remplace G_SATELLITE_MAP
) affiche les images satellite de Google Earth.
MapTypeId.HYBRID
(remplace G_HYBRID_MAP
) affiche à la fois des vues normales et des vues satellite.
MapTypeId.TERRAIN
(remplace G_PHYSICAL_MAP
) affiche une carte physique en fonction des informations de relief.
Un exemple définissant la carte sur la vue de terrain dans les versions 2 et 3 est illustré ci-dessous :
map.setMapType(G_PHYSICAL_MAP);
map.setMapTypeId(google.maps.MapTypeId.TERRAIN);
L'API Maps JavaScript v3 a également apporté quelques modifications aux types de carte moins courants:
- Les tuiles de carte pour les corps célestes autres que la Terre ne sont pas disponibles en tant que types de carte dans l'API v3, mais sont accessibles en tant que types de carte personnalisés, comme illustré dans cet exemple.
- Aucun type de carte spécial dans la version 3 ne remplace le type
G_SATELLITE_3D_MAP
de la version 2. À la place, vous pouvez intégrer le plug-in Google Earth dans vos cartes v3 à l'aide de cette bibliothèque.
Maximum Zoom Imagery
Les images satellite ne sont pas toujours disponibles à des niveaux de zoom élevés. Si vous souhaitez connaître le niveau de zoom le plus élevé disponible avant de définir le niveau de zoom, utilisez la classe google.maps.MaxZoomService
. Cette classe remplace la méthode GMapType.getMaxZoomAtLatLng()
de la v2.
var point = new GLatLng(
180 * Math.random() - 90, 360 * Math.random() - 180);
var map = new GMap2(document.getElementById("map"));
map.setUIToDefault();
map.setCenter(point);
map.setMapType(G_HYBRID_MAP);
map.getCurrentMapType().getMaxZoomAtLatLng(point,
function(response) {
if (response.status) {
map.setZoom(response.zoom);
} else {
alert("Error in Max Zoom Service.");
}
});
var myLatlng = new google.maps.LatLng(
180 * Math.random() - 90, 360 * Math.random() - 180);
var map = new google.maps.Map(
document.getElementById("map"),{
zoom: 0,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.HYBRID
});
var maxZoomService = new google.maps.MaxZoomService();
maxZoomService.getMaxZoomAtLatLng(
myLatlng,
function(response) {
if (response.status == google.maps.MaxZoomStatus.OK) {
map.setZoom(response.zoom);
} else {
alert("Error in Max Zoom Service.");
}
});
Images aériennes en perspective
Lorsque vous activez les images aériennes dans la version 3, les commandes sont semblables à la commande GLargeZoomControl3D
de la version 2, avec une commande de rotation interstitielle supplémentaire permettant une rotation dans les directions compatibles.
Vous pouvez suivre les villes pour lesquelles des images à 45° sont actuellement disponibles sur cette carte. Lorsque des images à 45° sont disponibles, une option de sous-menu est ajoutée au bouton Satellite de l'API Google Maps.
Calques
Les calques sont des objets sur une carte qui sont constitués d'une ou plusieurs superpositions. Ils peuvent être manipulés comme une seule unité et reflètent généralement des ensembles d'objets.
Calques pris en charge
La version 3 de l'API donne accès à plusieurs calques différents. Ces couches chevauchent la classe GLayer
de la version 2 dans les domaines suivants:
-
L'objet
KmlLayer
effectue le rendu des éléments KML et GeoRSS dans des superpositions v3, fournissant ainsi l'équivalent du calque GeoXml
de la version 2.
- L'objet
TrafficLayer
affiche un calque représentant les conditions de circulation, de la même manière que la superposition GTrafficOverlay
de la version 2.
Ces calques sont différents de ceux de la version 2. Les différences sont décrites ci-dessous. Vous pouvez les ajouter à une carte en appelant setMap()
et en lui transmettant l'objet Map
sur lequel afficher le calque.
Pour en savoir plus sur les couches compatibles, consultez la documentation sur les couches.
Calques KML et GeoRSS
L'API Maps JavaScript est compatible avec les formats de données KML et GeoRSS pour afficher des informations géographiques. Les fichiers KML ou GeoRSS doivent être accessibles publiquement si vous souhaitez les inclure dans une carte. Dans la version 3, ces formats de données sont affichés à l'aide d'une instance de KmlLayer
, qui remplace l'objet GGeoXml
de la version 2.
L'API v3 est plus flexible lors du rendu KML, vous permettant de supprimer des fenêtres d'informations et de modifier la réponse du clic. Pour en savoir plus, consultez la documentation sur les couches KML et GeoRSS dans la version 3.
Lorsque vous affichez une KmlLayer
, des restrictions de taille et de complexité s'appliquent. Pour en savoir plus, consultez la documentation de KmlLayer.
Les échantillons de code suivants montrent comment charger un fichier KML dans chacune des versions.
geoXml = new GGeoXml(
'https://googlearchive.github.io/js-v2-samples/ggeoxml/cta.kml');
map.addOverlay(geoXml);
var layer = new google.maps.KmlLayer(
'https://googlearchive.github.io/js-v2-samples/ggeoxml/cta.kml', {
preserveViewport: true
});
layer.setMap(map);
Le calque Traffic
v3 vous permet d'ajouter à vos cartes des informations sur le trafic en temps réel (si compatible) à l'aide de l'objet TrafficLayer
. Les informations sur le trafic sont fournies pour le moment où la requête est envoyée. Ces exemples présentent des informations sur le trafic pour Los Angeles:
var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(34.0492459, -118.241043), 13);
map.setUIToDefault();
var trafficOptions = {incidents:false};
trafficInfo = new GTrafficOverlay(trafficOptions);
map.addOverlay(trafficInfo);
var map = new google.maps.Map(
document.getElementById('map'), {
center: new google.maps.LatLng(34.0492459, -118.241043),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 13
});
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);
Contrairement à la version 2, il n'existe aucune option pour le constructeur TrafficLayer
dans la version 3. Les incidents ne sont pas disponibles dans la version 3.
Services
Geocoding
L'API Maps JavaScript fournit un objet geocoder
pour géocoder des adresses de manière dynamique à partir d'une entrée utilisateur. Si vous souhaitez géocoder des adresses statiques connues, consultez la documentation de l'API Geocoding.
L'API Geocoding a été considérablement mise à niveau et améliorée, avec l'ajout de nouvelles fonctionnalités et la modification de la représentation des données.
Dans l'API v2, GClientGeocoder
fournit deux méthodes différentes pour le geocoding inversé et le geocoding inversé, ainsi que des méthodes supplémentaires pour influencer la façon dont le geocoding est effectué. En revanche, l'objet Geocoder
de la version 3 ne fournit qu'une méthode geocode()
, qui accepte un littéral d'objet contenant les termes d'entrée (sous la forme d'un objet Requêtes de geocoding) et une méthode de rappel. Selon que la requête contient un attribut address
textuel ou un objet LatLng
, l'API Geocoding renvoie une réponse de geocoding inversé ou inversé. Vous pouvez influencer la façon dont le geocoding est effectué en transmettant des champs supplémentaires à la requête de geocoding:
- L'ajout d'un
address
textuel déclenche le geocoding de transfert, ce qui équivaut à appeler la méthode getLatLng()
.
- L'ajout d'un objet
latLng
déclenche un geocoding inversé, ce qui équivaut à appeler la méthode getLocations()
.
- L'inclusion de l'attribut
bounds
active la pondération de la fenêtre d'affichage, ce qui équivaut à appeler la méthode setViewport()
.
- L'inclusion de l'attribut
region
active la pondération par code régional, ce qui équivaut à appeler la méthode setBaseCountryCode()
.
Les réponses aux requêtes Geocoding de la version 3 sont très différentes de celles de la version 2. La version 3 de l'API remplace la structure imbriquée utilisée par la version 2 par une structure plus plate et plus facile à analyser. De plus, les réponses de la version 3 sont plus détaillées: chaque résultat est associé à plusieurs composants d'adresse qui donnent une meilleure idée de la résolution de chaque résultat.
Le code suivant utilise une adresse textuelle et affiche le premier résultat du geocoding:
var geocoder = new GClientGeocoder();
var infoPanel;
var map;
var AccuracyDescription = [
'Unknown accuracy', 'country level accuracy',
'region level accuracy', 'sub-region level accuracy',
'town level accuracy', 'post code level accuracy',
'street level accuracy', 'intersection level accuracy',
'address level accuracy', 'premise level accuracy',
];
function geocode_result_handler(response) {
if (!response || response.Status.code != 200) {
alert('Geocoding failed. ' + response.Status.code);
} else {
var bounds = new GLatLngBounds(new GLatLng(
response.Placemark[0].ExtendedData.LatLonBox.south,
response.Placemark[0].ExtendedData.LatLonBox.west
), new GLatLng(
response.Placemark[0].ExtendedData.LatLonBox.north,
response.Placemark[0].ExtendedData.LatLonBox.east
));
map.setCenter(bounds.getCenter(),
map.getBoundsZoomLevel(bounds));
var latlng = new GLatLng(
response.Placemark[0].Point.coordinates[1],
response.Placemark[0].Point.coordinates[0]);
infoPanel.innerHTML += '<p>1st result is <em>' +
// No info about location type
response.Placemark[0].address +
'</em> of <em>' +
AccuracyDescription[response.Placemark[0].
AddressDetails.Accuracy] +
'</em> at <tt>' + latlng + '</tt></p>';
var marker_title = response.Placemark[0].address +
' at ' + latlng;
map.clearOverlays();
var marker = marker = new GMarker(
latlng,
{'title': marker_title}
);
map.addOverlay(marker);
}
}
function geocode_address() {
var address = document.getElementById('input-text').value;
infoPanel.innerHTML = '<p>Original address: ' + address + '</p>';
geocoder.getLocations(address, geocode_result_handler);
}
function initialize() {
map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(38, 15), 2);
map.setUIToDefault();
infoPanel = document.getElementById('info-panel');
}
var geocoder = new google.maps.Geocoder();
var infoPanel;
var map;
var marker;
function geocode_result_handler(result, status) {
if (status != google.maps.GeocoderStatus.OK) {
alert('Geocoding failed. ' + status);
} else {
map.fitBounds(result[0].geometry.viewport);
infoPanel.innerHTML += '<p>1st result for geocoding is <em>' +
result[0].geometry.location_type.toLowerCase() +
'</em> to <em>' +
result[0].formatted_address + '</em> of types <em>' +
result[0].types.join('</em>, <em>').replace(/_/, ' ') +
'</em> at <tt>' + result[0].geometry.location +
'</tt></p>';
var marker_title = result[0].formatted_address +
' at ' + latlng;
if (marker) {
marker.setPosition(result[0].geometry.location);
marker.setTitle(marker_title);
} else {
marker = new google.maps.Marker({
position: result[0].geometry.location,
title: marker_title,
map: map
});
}
}
}
function geocode_address() {
var address = document.getElementById('input-text').value;
infoPanel.innerHTML = '<p>Original address: ' + address + '</p>';
geocoder.geocode({'address': address}, geocode_result_handler);
}
function initialize() {
map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(38, 15),
zoom: 2,
mapTypeId: google.maps.MapTypeId.HYBRID
});
infoPanel = document.getElementById('info-panel');
}
Directions
La version 3 de l'API Maps JavaScript remplace la classe GDirections
de la version 2 par la classe DirectionsService
pour calculer l'itinéraire.
Dans la version 3, la méthode route()
remplace les méthodes load()
et loadFromWaypoints()
de la version 2 de l'API. Cette méthode utilise un seul littéral d'objet DirectionsRequest
contenant les termes d'entrée et une méthode de rappel à exécuter à la réception de la réponse. Des options peuvent être indiquées dans ce littéral d'objet, comme dans le littéral d'objet GDirectionsOptions
dans la version 2.
Dans l'API Maps JavaScript v3, la tâche d'envoi des requêtes d'itinéraire a été séparée de la tâche d'affichage des requêtes, qui est désormais gérée avec la classe DirectionsRenderer
. Vous pouvez lier un objet DirectionsRenderer
à n'importe quel objet map ou DirectionsResult
via ses méthodes setMap()
et setDirections()
. Comme le moteur de rendu est un MVCObject
, il détectera toute modification de ses propriétés et mettra à jour la carte lorsque l'itinéraire associé changera.
Le code suivant montre comment demander un itinéraire à pied vers un lieu spécifique en utilisant les voies piétonnes à partir d'une adresse. Notez que seule la version 3 peut fournir des itinéraires à pied dans la voie piétonne du zoo de Dublin.
var map;
var directions;
var directionsPanel;
function initialize() {
var origin = new google.maps.LatLng(53.348172, -6.297285);
var destination = new google.maps.LatLng(53.355502, -6.30557);
directionsPanel = document.getElementById("route");
map = new GMap2(document.getElementById('map'));
map.setCenter(origin, 10);
map.setUIToDefault();
directions = new GDirections(map, directionsPanel);
directions.loadFromWaypoints(
[origin, destination], {
travelMode: 'G_TRAVEL_MODE_WALKING',
});
}
var map;
var directionsRenderer;
var directionsService = new google.maps.DirectionsService();
function initialize() {
var origin = new google.maps.LatLng(53.348172, -6.297285);
var destination = new google.maps.LatLng(53.355502, -6.30557);
directionsRenderer = new google.maps.DirectionsRenderer();
map = new google.maps.Map(
document.getElementById('map'), {
center: origin,
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
directionsRenderer.setPanel(document.getElementById("route"));
directionsRenderer.setMap(map);
directionsService.route({
origin: origin,
destination: destination,
travelMode: google.maps.DirectionsTravelMode.WALKING
}, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsRenderer.setDirections(result);
}
});
}
Street View
Google Street View fournit des vues interactives à 360° à partir de lieux désignés dans sa zone de couverture. La version 3 de l'API est compatible avec Street View de manière native dans le navigateur, contrairement à la version 2, qui nécessitait le plug-in Flash® pour afficher les images Street View.
Pour prendre en charge les images Street View, vous devez utiliser l'objet StreetViewPanorama
dans la version 3 ou l'objet GStreetviewPanorama
dans la version 2. Ces classes ont des interfaces différentes, mais elles jouent le même rôle: connecter le conteneur div
aux images Street View et spécifier le lieu et le point de vue du panorama Street View.
function initialize() {
var fenwayPark = new GLatLng(42.345573, -71.098326);
panoramaOptions = {
latlng: fenwayPark,
pov: {
heading: 35,
pitch: 5,
zoom: 1
}
};
var panorama = new GStreetviewPanorama(
document.getElementById('pano'),
panoramaOptions);
GEvent.addListener(myPano, "error", handleNoFlash);
}
function handleNoFlash(errorCode) {
if (errorCode == FLASH_UNAVAILABLE) {
alert('Error: Your browser does not support Flash');
return;
}
}
function initialize() {
var fenway = new google.maps.LatLng(42.345573, -71.098326);
var panoramaOptions = {
position: fenway,
pov: {
heading: 35,
pitch: 5,
zoom: 1
}
};
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('pano'),
panoramaOptions);
}
Vous pouvez accéder directement aux données Street View via l'objet StreetViewService
dans la version 3 ou via l'objet GStreetviewClient
similaire dans la version 2. Les deux fournissent des interfaces similaires pour récupérer ou vérifier la disponibilité des données Street View, et permettant d'effectuer des recherches par lieu ou par ID de panorama.
Dans la version 3, Street View est activé par défaut. La carte apparaîtra avec une commande Pegman Street View et l'API réutilisera le div de la carte pour afficher les panoramas Street View. Le code suivant montre comment reproduire le comportement de la version 2 en séparant les panoramas Street View dans un élément div distinct.
var marker;
var panoClient = new GStreetviewClient();
function initialize() {
if (GBrowserIsCompatible()) {
var myPano = new GStreetviewPanorama(
document.getElementById('pano'));
GEvent.addListener(myPano, 'error', handleNoFlash);
var map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(42.345573, -71.098326), 16);
map.setUIToDefault();
GEvent.addListener(map, 'click', function(overlay, latlng) {
if (marker) {
marker.setLatLng(latlng);
} else {
marker = new GMarker(latlng);
map.addOverlay(marker);
}
var nearestPano = panoClient.getNearestPanorama(
latlng, processSVData);
});
function processSVData(panoData) {
if (panoData.code != 200) {
alert("Panorama data not found for this location.");
}
var latlng = marker.getLatLng();
var dLat = latlng.latRadians()
- panoData.location.latlng.latRadians();
var dLon = latlng.lngRadians()
- panoData.location.latlng.lngRadians();
var y = Math.sin(dLon) * Math.cos(latlng.latRadians());
var x = Math.cos(panoData.location.latlng.latRadians()) *
Math.sin(latlng.latRadians()) -
Math.sin(panoData.location.latlng.latRadians()) *
Math.cos(latlng.latRadians()) * Math.cos(dLon);
var bearing = Math.atan2(y, x) * 180 / Math.PI;
myPano.setLocationAndPOV(panoData.location.latlng, {
yaw: bearing
});
}
function handleNoFlash(errorCode) {
if (errorCode == FLASH_UNAVAILABLE) {
alert('Error: Your browser does not support Flash');
return;
}
}
}
}
// Load the API with libraries=geometry
var map;
var marker;
var panorama;
var sv = new google.maps.StreetViewService();
function radians(degrees) { return Math.PI * degrees / 180.0 };
function initialize() {
panorama = new google.maps.StreetViewPanorama(
document.getElementById("pano"));
map = new google.maps.Map(
document.getElementById('map'), {
center: new google.maps.LatLng(42.345573, -71.098326),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 16
});
google.maps.event.addListener(map, 'click', function(event) {
if (!marker) {
marker = new google.maps.Marker({
position: event.latLng,
map: map
});
} else {
marker.setPosition(event.latLng);
}
sv.getPanoramaByLocation(event.latLng, 50, processSVData);
});
}
function processSVData(panoData, status) {
if (status == google.maps.StreetViewStatus.OK) {
alert("Panorama data not found for this location.");
}
var bearing = google.maps.geometry.spherical.computeHeading(
panoData.location.latLng, marker.getPosition());
panorama.setPano(panoData.location.pano);
panorama.setPov({
heading: bearing,
pitch: 0,
zoom: 1
});
panorama.setVisible(true);
marker.setMap(panorama);
}