Skip to Content

Overview

This plugin was created out of necessity. One day I decided I was sick of going to Google Maps, entering an address, clicking the little link icon, and copying the URL for a link whenever I added an address to something. This plugin automates that process. It finds the address tags and appends a link to the address on Google maps.

See examples | Download from Github

Note: Consider this “beta” and kindly report any issues you find. Thanks. :)

Implementation

It’s as easy as 1-2-3:

01. Include the Javascript

You will need to include the jQuery and jQuery Mapilicious right before the closing body tag (or in the head if you prefer). Link to them where ever you have them stored.

02. Verify markup of addresses in your code

Mapilicious needs to know where the addresses in your code are. The semantic way to markup an address is to use the address tag. Ideally, you should wrap all your addresses in this tag. The default behavior for Mapilicious is to look for address tags and use them to insert the links.

If you are unable to format your addresses this way, however, you can select the addresses on your page with any other jQuery selector.

03. Fire up Mapilicious and enjoy

If you are using all the default behavior, all you need is the following code inserted after the scripts included in step 1. If you have markup for your addresses other than the standard address tag, just target your addresses with the jQuery selector like the second example.

And, of course, the p.address would be replaced with whatever selector you are using.

Voila!

Options Reference

Here’s the fun part. The options. Options can be sent to Mapilicious in the standard jQuery way. Here’s an example:

Below is the list of options, what they do, and their default values:

range: ‘address’

This sets where Mapilicious looks for addresses. This value gets set automatically (based on how Mapilicious is initiated) and doesn’t ever really need to be used as an option.

placement: ‘append’

Options: ‘append’, ‘prepend’, ‘after’, ‘before’
append - puts the link inside selector at the end
prepend - puts the link inside the selector at the beginning
after - puts it outside the selector after
before puts it outside the selector before

mapUrl: ‘https://maps.google.com/maps?q=’

This is the base for the URL of the map link. Mapilicious is set to use Google maps by default, but if for some odd reason you want to use something else, you can enter the URL with this option. Note the ?q= at the end of the URL. This is the query string for Google. Other services would probably use something slightly different.

linkText: ‘Map’

This is the text used for the map link. It can be set to something else if you prefer different verbiage.

linkTemplate: div class=”mapilicious_map_link” {link} /div

This is how the link is wrapped. The {link} will be replaced with the actual link. If you only want the link appended and no wrapping markup, this can be set to an empty string or false.

linkAttr: ”   —empty

This option gives the ability to add a string to the map link. This can be used to add classes, a target, or other html attributes.

That’s all folks. Issues? Github it.