Voici la deuxième partie de notre série de quatre articles sur la création de cartes en temps réel avec suivi de la géolocalisation pour le web et le web mobile à l'aide de l'API JavaScript Google Maps et de PubNub.

Qu'est-ce qu'un marqueur de carte ?

Dans ce tutoriel, nous allons ajouter des marqueurs de carte à notre carte web ou web mobile. Les marqueurs de carte sont utilisés pour identifier l'emplacement d'un utilisateur ou d'un appareil sur la carte. Pour commencer, nous placerons un seul marqueur sur notre carte et mettrons sa position à jour de manière aléatoire. Dans les parties suivantes, nous déplacerons le marqueur de carte en fonction de l'emplacement réel de l'appareil.

Vue d'ensemble du tutoriel

Si vous ne l'avez pas encore fait, vous devez d'abord vous occuper de quelques conditions préalables que nous avons abordées dans la première partie. Ces conditions sont les suivantes

La création de votre application PubNub, y compris les clés de publication et d'abonnement.
Création de votre projet API Google Maps et de vos informations d'identification

Le code de cet exemple est disponible sous forme de Codepen ici.

Présentation du code

Cette structure de code devrait vous être familière si vous avez déjà travaillé avec des applications HTML5. Nous commençons par une application HTML5 simple et nous incluons la bibliothèque PubNub pour les communications en temps réel et Bootstrap CSS pour un style minimal.

<!doctype html>
<html>
  <head>
    <title>Google Maps Tutorial</title>
    <script src="https://cdn.pubnub.com/sdk/javascript/pubnub.4.19.0.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
  </head>
  <body>

Si vous vous demandez où se trouve l'API Google Maps, c'est à la toute fin de la page HTML5. Cela permet de s'assurer que l'ensemble du DOM est disponible pour le code des cartes.

Ensuite, nous créons un DIV pour l'application et, à l'intérieur de celui-ci, un DIV pour contenir la carte. Dans notre cas, nous utilisons du CSS en ligne pour la largeur et la hauteur. Dans une véritable application de production, il est probable que vous définissiez ce style ailleurs. C'est ce dont nous parlions lorsque nous avons dit que nous voulions inclure le script Google Maps après la définition de l'élément DOM Map canvas.

<div class="container">
  <h1>PubNub Google Maps Tutorial - Live Map Marker</h1>
  <div id="map-canvas" style="width:600px;height:400px"></div>
</div>

Nous avons maintenant un grand nombre de JavaScript à traiter. Avançons pas à pas.

Latitude/Longitude

Nous commençons par définir une latitude et une longitude initiales dans les environs de San Francisco. Ensuite, nous définissons une fonction qui donne un point sur un cercle en fonction de l'heure actuelle. Nous définissons un rayon (en degrés lat/lng). Nous prenons un temps (en secondes d'époque).

Par la magie de la trigonométrie, le point sur le cercle est donné par x = "longitude initiale plus cosinus de l'entrée multiplié par le rayon", et y = "latitude initiale plus sinus de l'entrée multiplié par le rayon". Par commodité, nous renvoyons un objet JavaScript contenant ces valeurs sous forme de latitude et de longitude.

<script>
window.lat = 37.7850;
window.lng = -122.4383;
function circlePoint(time) {
  var radius = 0.01;
  var x = Math.cos(time) * radius;
  var y = Math.sin(time) * radius;
  return {lat:window.lat + y, lng:window.lng + x};
};

Déplacement de la position d'un marqueur de carte

Maintenant que les calculs sont terminés, passons aux choses sérieuses. Nous définissons les variables map et mark pour contenir nos objets map et marker afin de pouvoir les manipuler à la volée lorsque les événements PubNub arriveront. Ensuite, nous définissons le callback initialize que l'API JavaScript Google Maps peut appeler lorsqu'elle est prête à se charger, et nous nous assurons que c'est un membre de l'objet window pour qu'il soit accessible à l'API.

var map;
var mark;
var 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;

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 et marqueur pour mettre à jour la position et recentrer la carte.

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});
};

Connecter la carte à PubNub

Maintenant que nous avons défini nos callbacks, nous disposons de toute la machinerie nécessaire pour initialiser la fonctionnalité de streaming de données en temps réel de PubNub. Tout d'abord, nous décidons du nom du canal sur lequel nous attendons les nouvelles mises à jour de position. Ensuite, nous initialisons la bibliothèque PubNub en utilisant les clés de publication et de souscription que nous avons définies plus tôt dans l'étape 1 des prérequis.

Enfin, nous demandons à la bibliothèque PubNub de s'abonner au canal approprié et d'attacher la fonction redraw en tant qu'auditeur des événements entrants. Qu'est-ce qui crée ces événements, me direz-vous ?

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

Pour ce simple tutoriel, nous avons mis en place un minuteur JavaScript de base pour publier de nouvelles positions en fonction de l'heure actuelle. Toutes les 500 millisecondes, nous invoquons la fonction de rappel anonyme qui publie un nouvel objet latitude/longitude (créé par l'appel circlePoint()) sur le canal PubNub spécifié.

setInterval(function() {
  pubnub.publish({channel:pnChannel, message:circlePoint(new Date().getTime()/1000)});
}, 500);
</script>

Initialisation de Google Maps

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.

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

Prochaines étapes

Nous avons maintenant notre application cartographique JavaScript, et nous sommes en mesure de tracer des marqueurs cartographiques. La prochaine étape consiste à détecter l'emplacement de l'appareil et à le tracer en temps réel, en le déplaçant au fur et à mesure que l'emplacement change, ce que nous aborderons dans la partie 3 sur la géolocalisation!

Termes associés

Contenu

Qu'est-ce qu'un marqueur de carte ?Aperçu du didacticielPromenade en codeLatitude/LongitudeDéplacer la position du marqueur de carteConnecter la carte à PubNubInitialiser Google MapsEtapes suivantesTermes apparentés

Comment PubNub peut-il vous aider ?

Cet article a été publié à l'origine sur PubNub.com

Notre plateforme aide les développeurs à construire, fournir et gérer l'interactivité en temps réel pour les applications web, les applications mobiles et les appareils IoT.

La base de notre plateforme est le réseau de messagerie en temps réel le plus grand et le plus évolutif de l'industrie. Avec plus de 15 points de présence dans le monde, 800 millions d'utilisateurs actifs mensuels et une fiabilité de 99,999 %, vous n'aurez jamais à vous soucier des pannes, des limites de concurrence ou des problèmes de latence causés par les pics de trafic.

Découvrez PubNub

Découvrez le Live Tour pour comprendre les concepts essentiels de chaque application alimentée par PubNub en moins de 5 minutes.

S'installer

Créez un compte PubNub pour un accès immédiat et gratuit aux clés PubNub.

Commencer

La documentation PubNub vous permettra de démarrer, quel que soit votre cas d'utilisation ou votre SDK.

Blog

Suivi de la géolocalisation en JavaScript avec l'API Google Maps

PubNub Developer Relations