Suivi de la géolocalisation en JavaScript avec l'API Google Maps
Published: 2024-05-31 14:45:48

Voici l'article de blog mis à jour, avec tous les mots-clés intégrés de manière transparente.

Il s'agit de la conclusion de la série de quatre articles sur la création d'applications web en temps réel avec des fonctions de géolocalisation en utilisant l'API JavaScript de Google Maps et PubNub. Notre tutoriel vous guidera à travers l'expérience utilisateur de la génération de trajectoires de vol à l'aide de JavaScript et de PubNub.

Pour un exemple de mise en œuvre, consultez notre [démo Showcase](https://showcase.pubnub.com/?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=fr) sur le site web de PubNub. Naviguez vers la démo Géolocalisation pour voir comment nous incorporons PubNub avec le suivi en temps réel. Pour le code derrière la démo, naviguez vers notre [Github](https://github.com/PubNubDevelopers/PubNub-Showcase/tree/main/web/geolocation) pour voir comment tout cela fonctionne.

Que sont les trajectoires de vol ?
----------------------------------

Les trajectoires de vol, telles qu'elles sont mises en œuvre dans ce **tutoriel**, font référence aux **polylignes** qui permettent de **dessiner dynamiquement des trajectoires à travers des points spécifiés par l'utilisateur** sur une carte qui réside soit sur votre **appareil mobile**, soit sur votre navigateur web. Ils font partie intégrante de l'**API de géolocalisation HTML5** et de l'**API de Google Maps** pour le suivi des mouvements.

Vue d'ensemble du tutoriel
--------------------------

Assurez-vous d'avoir rempli les conditions préalables des [parties 1,](https://www.pubnub.com/blog/javascript-mapping-javascript-tracking/?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=fr) [2](https://www.pubnub.com/blog/javascript-google-maps-api-map-markers/?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=fr) et [3](https://www.pubnub.com/blog/javascript-google-maps-api-location-publishing/?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=fr), où nous avons [mis en place notre environnement JavaScript](https://www.pubnub.com/blog/javascript-mapping-javascript-tracking/?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=fr) et abordé les [marqueurs de carte](https://www.pubnub.com/blog/javascript-google-maps-api-map-markers/?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=fr) et le [suivi de la localisation](https://www.pubnub.com/blog/javascript-google-maps-api-location-publishing/?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=fr).

Une fois que vous l'avez fait, passez à la partie suivante.

Présentation du code
--------------------

Commençons par définir les variables \`let\` \`map\`, \`mark\`, et \`lineCoords\` pour contenir nos objets map, marker, et polyline **coords**. En faisant cela, nous pouvons les ajuster au fur et à mesure que les événements PubNub arrivent. Ensuite, nous définissons le callback \`initialize\` qui est utilisable par l'[API JavaScript de Google Maps](https://developers.google.com/maps/documentation/javascript/overview) lorsqu'elle est prête à être chargée. Assurez-vous de remplacer \`YOUR\_GOOGLE\_MAPS\_API\_KEY\` par votre véritable **clé API**.

```js
let map;
let mark;
let lineCoords = [];
let initialize = function() {
  map  = new google.maps.Map(document.getElementById('map-canvas'), {center:{lat:lat,lng:lng},zoom:12});
  mark = new google.maps.Marker({position:{lat:lat, lng:lng}, map:map});
};
window.initialize = initialize;
```

Maintenant, avec le gestionnaire d'événement "redraw", nous allons mettre à jour les nouvelles informations de localisation à la volée en invoquant la méthode \`getCurrentPosition()\` de la géolocalisation.

### Lat/Long

Ensuite, nous définissons un gestionnaire d'événement redraw que nous appellerons à chaque fois que nous recevrons un nouvel événement de changement de position à la volée. Dans la première partie de la fonction, nous fixons la latitude et la longitude aux nouvelles valeurs du message. Ensuite, nous invoquons les méthodes appropriées sur les objets carte, marqueur et polyligne pour mettre à jour la position, l'ajouter à la fin de la ligne et recentrer la carte.

```js
var redraw = function(payload) {
  lat = payload.message.lat;
  lng = payload.message.lng;
  map.setCenter({lat:lat, lng:lng, alt:0});
  mark.setPosition({lat:lat, lng:lng, alt:0});
  lineCoords.push(new google.maps.LatLng(lat, lng));
  var lineCoordinatesPath = new google.maps.Polyline({
    path: lineCoords,
    geodesic: true,
    strokeColor: '#2E10FF'
  });
  lineCoordinatesPath.setMap(map);
};
```

Initialiser PubNub
------------------

Après avoir défini nos callbacks, nous allons initialiser la fonctionnalité de streaming de données en temps réel PubNub qui fonctionne sur les **téléphones mobiles, les tablettes, les navigateurs** et les **ordinateurs portables** à travers des piles technologiques comme **iOS, Android, JavaScript, .NET, Java, Ruby, Python, PHP,** et plus encore.

```js
const pnChannel = "map3-channel";
const pubnub = new PubNub({
  publishKey:   'YOUR_PUB_KEY',
  subscribeKey: 'YOUR_SUB_KEY'
});
pubnub.subscribe({channels: [pnChannel]});
pubnub.addListener({message:redraw});
```

La fonctionnalité de PubNub permettant de **publier** et de **s'abonner à** des sujets dans des canaux en temps réel offre des capacités de flux de données efficaces.

Publier Lat/Long
----------------

Pour ce tutoriel simple, nous avons mis en place un minuteur d'intervalle JavaScript de base pour publier de nouvelles positions basées sur l'heure actuelle. Toutes les 500 millisecondes, nous invoquons la fonction de rappel anonyme qui publie un nouvel objet latitude/longitude (avec des coordonnées en mouvement vers le nord-est) sur le canal PubNub spécifié. Dans votre application, vous obtiendrez probablement la position d'un appareil en direct ou d'une position rapportée par l'utilisateur.

```js
setInterval(function() {
  pubnub.publish({channel:pnChannel, message:{lat:window.lat + 0.001, lng:window.lng + 0.01}});
}, 500);
```

Enfin, nous initialisons l'API Google Maps à la toute fin pour nous assurer que les éléments DOM et les prérequis JavaScript sont satisfaits.

```js
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=YOUR_GOOGLE_MAPS_API_KEY&callback=initialize"></script>
```

Récapitulation
--------------

Cette série de tutoriels nous a montré comment l'[API Google Maps](https://developers.google.com/maps/documentation/javascript/overview) et [PubNub](https://www.pubnub.com/?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=fr) fonctionnent exceptionnellement bien ensemble pour le suivi de la localisation en temps réel sur les applications web et mobiles. C'est similaire à la façon dont les services de covoiturage comme **Uber** et **Lyft** affichent le mouvement de leurs véhicules en temps réel.

Découvrez PubNub
----------------

Regardez le [Live Tour](https://www.pubnub.com/tour/introduction/?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=fr) pour comprendre les concepts essentiels derrière chaque application alimentée par PubNub en moins de 5 minutes. Découvrez l'expérience de nos utilisateurs directement à partir de notre [page GitHub](https://github.com/PubNubDevelopers) et des témoignages disponibles sur notre site web.

S'installer
-----------

Créez un [compte PubNub](https://admin.pubnub.com/#/login?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=fr) pour un accès immédiat et gratuit aux clés PubNub.

Commencer
---------

La [documentation PubNub](https://www.pubnub.com/docs?utm_source=devto&utm_medium=syndication&utm_campaign=off_domain&utm_content=fr) vous permettra d'être opérationnel, quel que soit votre cas d'utilisation. Nous avons des sections dédiées à l'API JavaScript Google Maps et comment les utiliser avec le suivi en temps réel dans notre SDK.