linkSchemaData jQuery Plugin
The purpose of this plugin is to parse schema.org/postalAddress formatted data and wrap it in a link which will open a native mapping app for mobile devices. It also has a default behaviour which will open a mapping site (google maps) for all other devices.The reason this requires a plugin is because there is no standard way to open a map app on a mobile device.
by John Allan
HTML
<p itemscope itemtype="schema.org/PostalAddress">
<span itemprop="name">Zelen Shoes</span><br />
<span itemprop="streetAddress">894 Granville Street</span><br />
<span itemprop="addressLocality">Vancouver</span>,
<span itemprop="addressRegion">BC</span><br />
<span itemprop="postalCode">V6Z 1K3</span>
<span itemprop="addressCountry">Canada</span>
</p>
CSS
p{
margin:0 0 0.5em 0;
}
.mapLink{
color: green;
text-decoration: none;
}
.mapLink:hover{
color: red;
text-decoration: underline;
}
JavaScript
// by: John Allan (habaneros.com)
// ver: 0.2
// date: December 2012
// Requirements: jQuery
//
// The purpose of this plugin is to parse schema.org formatted
// data and wrap it in a link. The default functionality is for PostalAddress data
// and opens a native mapping app for mobile devices or Google Maps for a desktop or
// unknown device.
//
// Using the settings object of the plug you could change the default functionality to
// parse other micro data formats, build other types of URLs or support other devices.
//
// Supported devices for the default map functionality:
// iPhone,iPad,iPod,Android,WP7,BlackBerry,other via default template
// Tested Device:
// iPhone4, Android(?), FF4+
//
// TODO:
// develop a pure JS version to remove reliance on jQuery
// add support for default/existing anchor tag
//
// Default settings:
//
// $("[itemtype='schema.org/PostalAddress']").linkSchemaData({
// 'linkTitle': 'Open a map to this location', (string) //the title which appears on the anchor tag (string)
// 'linkClass': 'mapLink', (string) //the class(es) which appear on the anchor tag (string)
// 'openInNewWindow': true, (boolean) //links open in a new window (boolean)
// 'openInSameWindow': true, (boolean) //if (openInNewWindow) all links open in the same new window (boolean)
// 'dataAttribute': "itemprop", (string) //the attribute name for matching the dataTemplate keys to DOM elements
// 'dataTemplate': {}, (object) //each key must match a marker in the urlTemplates and a dataAttribute
// 'urlTemplates': {}, (object) //contains a URL template for each device type
// 'deviceMap' [] (array) //an array of objects which maps user-agent strings to URL templates via device type
// });
(function($) {
$.fn.linkSchemaData = function(options) {
var settings = $.extend({
'linkTitle': 'Open a map to this location',
'linkClass': 'mapLink',
'openInNewWindow': true,
...