¿Cómo puedo visualizar las posiciones de los escaneos en un mapa?

Muestra en un mapa las ubicaciones en las que se escanearon tus códigos QR.

book reader icon
4 minutos
facebook logo gray
linkedin logo gray
mail logo gray
¿Cómo puedo visualizar las posiciones de los escaneos en un mapa?

Envío de ubicaciones de escaneo con GPS

Cuando activas la función de rastreo GPS de tus códigos QR, a las personas que escanean sus códigos QR se les pregunta si desean enviar su posición GPS. Si permiten que se envíe su ubicación, almacenamos un valor lng/lat que puedes usar para representar una ubicación de escaneo en un mapa.

El siguiente tutorial explica cómo puedes usar nuestro widget QR Map para incrustarlo en tu sitio web y mostrar las ubicaciones de escaneo de tus usuarios.

Requisitos previos

Para incrustar un mapa en tu sitio web, necesitas una cuenta activa, una clave de API válida y una clave de la API de Google Maps. Introduce tu clave de la API de Google Maps en la configuración de Cuenta para que se pueda representar el mapa.

Cómo crear un mapa que muestre las ubicaciones de escaneo de códigos QR

1. Añade el script a tu página.

Inserta el siguiente script con tu subdominio y clave API en tu página web. Atención: usa la clave API de tu cuenta y NO la clave API de Google Maps.

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

2. Crea una capa div donde se incrustará tu mapa

Coloca el <div> en tu página, en el lugar en el que debe mostrarse el mapa:

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

3. Agrega parámetros opcionales de visualización

lng / lat: Centra el mapa en la posición dada

zoom: Centra el mapa a un nivel de zoom predeterminado (min=1 | max=12)

showlabels: Si se establece en 0, no se mostrará ningún pin con  etiqueta cuando se desplace el cursor.

displayinfoonclick: Si se establece en 0, no se muestra información al hacer clic en el icono.

tagmap.js? ... &lng=16.3691234&lat=48.2055264&zoom=12

4. Muestra las posiciones de escaneo

Si quieres, puedes mostrar dónde se ha escaneado un código QR rastreable específico con la función de GPS activada. Simplemente agrega la identificación del parámetro opcional a la URL del script y establécelo como valor id de un código QR existente. La identificación de un código QR es la URL abreviada (por ejemplo, 7W).

De esta forma, en lugar de mostrar en el mapa todo los códigos QR que están asignados a una ubicación fija, se mostrarán todas las ubicaciones de escaneo de un código QR específico.

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

Si quieres mostrar más de un código QR con posicionamiento GPS en el mapa, simplemente agrega varias identificaciones separadas por un signo +.

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

5. Establece un intervalo de fechas

Puede ajustar las estadísticas agregando un parámetro de rango de fechas:

  • establece un intervalo específico from - to (desde-hasta) la fecha (Ejemplo: &from=2024-02-24&to=2024-02-24).
  • o establece un rango predefinido: today, yesterday, last7, last31 (Ejemplo: &range=today).

6. Define un límite de escaneos por código

Puedes limitar la cantidad de posiciones de escaneo que se muestran en el mapa configurando el parámetro de límite para cada Código QR, separado por un +.

Si el límite se establece en 1, se mostrará el último escaneo del Código QR.

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

7. Personaliza tu mapa

En lugar de utilizar los iconos de código QR predeterminados, puedes utilizar un símbolo/icono personalizado. Establece siempre la URL absoluta como el ícono de parámetro opcional

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

Si estás mostrando múltiples códigos QR (= pasando más de una id al parámetro id) puedes establecer un ícono diferente para cada código QR agregando múltiples URL de iconos separados por un + (signo más).

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

8. Dibuja una ruta en el mapa a partir de las ubicaciones de escaneo

Si configuras el parámetro opcional drawpath como TRUE (verdadero), se dibujará una ruta entre las posiciones escaneadas del código QR.

tagmap.js? ... &drawpath=true

Depuración

No se muestra el mapa

Abre la consola de errores desde tu navegador. La consola te mostrará más información sobre el error.

Si el mapa no se muestra en tu sitio web, puede deberse a que Goolge solicita una clave API. Asegúrate en primer lugar de haber implementado el widget como se describe más arriba.

Si tu navegador muestra un mensaje de advertencia de Google como el que se muestra a continuación, obtén una clave para la API de Google y agrégala en tu configuración de usuario.

Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys

Privacidad de datos

La posición GPS solo se muestra en el mapa cuando el usuario ha aprobado la geolocalización.

Como alternativa, se mostrará la posición obtenida a través de IP, siempre y cuando no tengas seleccionada la opción "No almacenar visitantes únicos en absoluto"  en la configuración de Anonimización de IP.

Demo del Widget QR Map

A continuación puedes ver en acción el widget QR Map que muestra las posiciones de escaneo del código QR enviado a través de GPS.

Última actualización hace 4 mess