Demo Account

Welcome to our QR Code demo account. You can test all functions however please note that all your generated data will be deleted every 24 hours.

I understand that this is just a demo account and all my data is deleted every 24 hours

If you want to store your data permanently, please register an account here:

Show Plans
X

This is fully functional demo instance. Please note that all user generated data will be deleted every 24 hours. Register here

Embedd a Map of your Geo Tagged QR Codes on your Website

With the TagMap Widget you are able to embed all your Geo Tagged QR Codes directly on your website. The widget uses Google Maps to view your QR Codes on the map. If you click on a QR Code, you will be redirected to the original URL.

How to embed

It does not get any simpler. Just include the following script Tag and place the div on your page, where the map should be displayed:

<script 
    type="text/javascript" 
    src="//white.qrd.by/widgets/tagmap.js?apikey=<YOUR_API_KEY_GOES_HERE>">
</script>
<div style="width:100%;height:500px;" id="map_canvas"></div>
        
To make sure that the map is displayed correctly, please set your Google Maps API key in user settings

With the optional parameter lng, lat, zoom and showlabels in the script URL you can center the map at a given zoom level. If you set the parameter showlabels to 0, no label will be displayed on a pin when hovering.

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

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 without the domain name white.qrd.by (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

Time Range

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

  • set a specific interval from - to date: e.g. &from=2020-02-18&to=2020-02-18

  • or set a predefined range: today, yesterday, last7, last31 e.g. &range=today

Limit

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 +

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

Styling

If you want to change the size of the map, just css style the map_canvas element, like:

#map_canvas {
    width:100%; 
    height:529px;   
}

Icons

Instead of using the default QR Code Icons you may use a customized symbol (e.g.: ). Always set the absolute URL as the optional parameter icon:

tagmap.js? ... &icon=http://white.qrd.by/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=http://white.qrd.by/img/littleone.png+
http://white.qrd.by/img/anotherone.png

Path

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

tagmap.js? ... &drawpath=true

TagMap Demo

See the TagMap Widget in action by clicking the demo button below. You may then view the source code of the demo page.

Show Demo

TagMap API

You can also get a JSON List of all your Geo Tagged QR Codes using the API:

API Docs

Debugging

Map is not displayed

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 shown on the Demo Page.

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