Comment puis-je visualiser mes positions de balayage sur une carte ?

Comment puis-je visualiser mes positions de balayage sur une carte ?

Affichez sur une carte les lieux où vos codes QR ont été scannés.

book reader icon
4 Minutes
facebook logo gray
linkedin logo gray
mail logo gray

Transmission des positions de balayage avec le GPS

Lorsque vous activez la fonction de suivi GPS de vos codes QR, les personnes qui scannent vos codes QR sont invitées à indiquer leur position GPS. S'ils autorisent l'envoi de leur position, nous enregistrons une valeur lng/lat que vous pouvez utiliser pour afficher la position d'un scan sur une carte. Le tutoriel suivant explique comment vous pouvez utiliser notre widget QR Map pour l'intégrer à votre site web et afficher les emplacements de scannage de vos utilisateurs.

Conditions préalables

Pour intégrer une carte à votre site web, vous devez disposer d'un compte actif, d'une clé API valide et d'une clé API Google Maps. Veuillez définir votre clé API Google Maps dans les paramètres de l'utilisateur ou dans la section "branding" de votre compte pour que la carte puisse être affichée.

Comment créer une carte montrant les emplacements des codes QR ?

1. Ajoutez le script à votre page

Insérez le script suivant avec votre sous-domaine et votre clé API dans votre page web. Attention : Utilisez la clé API de votre compte et NON la clé API de Google Maps.

<script 
    type="text/javascript" 
    src="//YOUR_SUBDOMAIN.qrplanet.com/widgets/tagmap.js?apikey=***************">
</script>

2. Créez un calque div où votre carte sera intégrée.

Placez la <div> sur votre page, à l'endroit où la carte doit être affichée :

<div style="width:100%;height:500px;" id="map_canvas"></div>

3. Ajouter des paramètres de visualisation optionnels

  • le paramètre lng / lat centre la carte sur la position donnée
  • zoom - Centre la carte à un niveau de zoom donné min=1 | max=12
  • showlabels - Si ce paramètre est fixé à 0, aucune étiquette ne sera affichée sur une épingle au survol de celle-ci.
  • displayinfoonclick - Si la valeur est fixée à 0, aucune information n'est affichée lorsque vous cliquez sur l'icône.
tagmap.js? ... &lng=16.3691234&lat=48.2055264&zoom=12

4. Affichage des positions de balayage

Si vous souhaitez afficher l'endroit où un seul code QR traçable avec la fonction GPS activée a été scanné, il vous suffit d'ajouter le paramètre facultatif id dans l'URL du script et de fixer la valeur à l'id de l'un des codes QR que vous avez créés. L'id d'un code QR est l'URL abrégée par exemple 7W. Au lieu d'afficher vos codes QR géolocalisés qui sont assignés à un emplacement fixe, les emplacements de balayage d'un seul code QR sont affichés sur la carte.

tagmap.js? ... &id=7W

Si vous souhaitez afficher plus d'un code QR avec des positions GPS sur la carte, il suffit d'ajouter plusieurs identifiants séparés par un +.

tagmap.js? ... &id=7W+SECONDID+THIRDID+...+N_TH-ID

5. Définir une plage de temps pour les durées de balayage

Vous pouvez affiner les statistiques en ajoutant un paramètre d'intervalle de temps :

  • définir un intervalle spécifique de - à la date : par exemple, &from=%%%YEAR%%02-24&to=%%%YEAR%%02-24
  • ou définir un intervalle prédéfini : aujourd'hui, hier, 7 derniers, 31 derniers, par exemple &range=today

6. Fixer une limite de balayages par code QR

Vous pouvez limiter le nombre de positions de balayage GPS affichées sur la carte en définissant le paramètre de limite pour chaque code QR séparé par un +.

Si la limite est fixée à 1, la dernière lecture du code QR sera affichée.

tagmap.js? ... &limit=3+2+10

7. Style de la carte QR

Au lieu d'utiliser les icônes de code QR par défaut, vous pouvez utiliser un symbole/une icône personnalisée. Définissez toujours l'URL absolue comme paramètre optionnel de l'icône.

tagmap.js? ... &icon=https://qr.domain.com/img/littleone.png

Si vous affichez plusieurs codes QR = en passant plus d'un identifiant au paramètre id, vous pouvez définir une icône différente pour chaque code QR en ajoutant plusieurs URL d'icônes séparées par un +.

tagmap.js? ... &icon=https://qr.domain.com/img/littleone.png+
http://icon.com/img/anotherone.png

8. Tracer un chemin sur la carte entre les emplacements de balayage

Si le paramètre facultatif drawpath est défini sur true, un chemin entre les positions scannées du code QR sera dessiné.

tagmap.js? ... &drawpath=true

Débogage

La carte n'est pas affichée

Ouvrez la console d'erreur à partir de votre navigateur. La console affiche plus d'informations sur l'erreur.

Si la carte ne s'affiche pas sur votre site web, c'est peut-être parce que Goolge a besoin d'une clé API. Veuillez d'abord vous assurer que vous avez implémenté le widget comme décrit ci-dessus.

Si votre navigateur affiche un message d'avertissement de Google comme indiqué ci-dessous, veuillez obtenir une clé API de Google et l'ajouter dans vos paramètres d'utilisateur.
Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys

Confidentialité des données

La position GPS n'apparaît sur la carte que lorsque l'utilisateur a accepté d'être géolocalisé ou que la position est récupérée par l'IP et que l'anonymisation de l'IP est autre chose que "Ne pas stocker du tout les visiteurs uniques".

QR Map Widget Demo

Voir le widget TagMap en action montrant les positions de balayage des codes QR soumis par GPS.

Last update 19 hours ago