Embed a QR Code Map on your site

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

Just include the following script Tag and place the div on your page, where the map should be displayed:

<script 
    type="text/javascript" 
    src="//qrd.by/widgets/tagmap.js?apikey=<YOUR_API_KEY_GOES_HERE>">
</script>
<div style="width:820px;height:500px;" id="map_canvas"></div>
        

With the optional parameter lng, lat and zoom in the script URL you can center the map at a given zoom level

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 shortened URL without the domain name 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

Styling

Map

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

#map_canvas {
    width:820px; 
    height:529px;   
}

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

Icons

Instead of using the default QR Code Icons you may use a customized symbol:

default icon customized icon
Default Icon Customized Icon

To display a customized icon set the absolute URL of the image as the optional parameter icon:

tagmap.js? ... &icon=<PATH>/icon.png

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

Goto API
Top