This website uses necessary cookies to ensure that our website is ideally usable. We do not use cookies that process personal data without your prior consent. Read our Cookie Policy

How do I visualize my scan positions in a map?

Display the locations where your QR Codes have been scanned on a map.

book reader icon
3 Minutes
facebook logo gray
linkedin logo gray
mail logo gray
How do I visualize my scan positions in a map?

Submitting scan positions with GPS

When you activate the GPS tracking function of your QR Codes, people who scan your QR Codes are asked, if they want to submit their GPS position. If they allow their location being sent, we store a lng/lat value that you can use to render a scan location on a map. The following tutorial explains how you can use our QR Map widget to embed it in your website and show the scan locations of your users.

Preconditions

To embed a map on your website you require an active account, a valid API key and a Google Maps API key. Please set your Google Maps API key in user settings or in the branding section of your account that the map can be rendered.

How to create a map showing QR Code scan locations

1. Add the script to your page

Insert the following script with your subdomain and API key in your webpage. Caution: Use the API key of your account and NOT the Google Maps API key.

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

2. Create a div layer where your map will be embedded

Place the <div> on your page, where the map should be displayed:

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

3. Add optional visualization parameters

  • lng / lat parameter will center the map on the given position
  • zoom - Center the map at a given zoom level (min=1 | max=12)
  • showlabels - If you set to 0, no label will be displayed on a pin when hovering.
  • displayinfoonclick - If set to 0, no information is displayed when you click on the icon.
tagmap.js? ... &lng=16.3691234&lat=48.2055264&zoom=12

4. Display scan positions

If you want to display where a single trackable QR Code with the activated GPS function has been scanned, just add the optional parameter id in the script URL and set the value to an id of one of your created QR Codes. The id of a QR Code is the shorted URL (e.g. 7W). Instead of showing your geo tagged QR Codes that are assigned to a fixed location, the scan locations of a single QR Code are shown on the map.

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

If you want to display more than one QR Code with GPS positions on the map just add multiple ids separated by a +

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

5. Set a time range for the scan times

You can fine tune the statistics by adding a time range parameter:

  • set a specific interval from - to date: e.g. &from=2024-02-24&to=2024-02-24
  • or set a predefined range: today, yesterday, last7, last31 e.g. &range=today

6. Set a limit of scans per QR Code

You can limit the number of GPS scan positions displayed on the map by setting the limit parameter for each QR Code separated by a +.

If the limit is set to 1, the last scan of the QR Code will be displayed.

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

7. Style your QR Map

Instead of using the default QR Code Icons you may use a customized symbol/icon. Always set the absolute URL as the optional parameter icon

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

If you are displaying multiple QR Codes (=passing more than on id to the id Parameter) you can set a different icon for each QR Code by adding multiple icon URLs separated by a +

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

8. Draw a path on the map between scan locations

With the optional Parameter drawpath set to true, a path between the scanned positions of the QR Code will be drawn.

tagmap.js? ... &drawpath=true

Debugging

Map is not displayed

Open the error console from your browser. The console shows more information about the error.

If the map is not displayed on your website this might occurs because Goolge wants an API Key. Please make sure first that you have implemented the widget like described above.

If your browser displays warning message by Google like shown below please get an API Key from Google and add it in your user settings.
Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys

Data privacy

GPS position is only shown on the map when the user has approved being geolocated or the position is retrieved through IP and the IP Anonymization is anything else than “Do not store unique visitors at all”.

QR Map Widget Demo

See the TagMap Widget in action showing scan positions of QR Code submitted via GPS.

Last update 1 year ago