Embed or link to an interactive map
Make it easy for people to find your library or to find the location of an event!
First, go to a mapping website like http://mapquest.com or http://maps.google.com/. Type in the address, and when your map is generated, look for an option to “Link” or “Embed” the map. If you don’t see that text, look for the ‘chain link’ icon.
This will open a pop-up window with two options; a customized link to the map you just created, and the coding that will display the map itself. (Note that the link is the same as the URL displayed in your browser, so if that’s all you need, you can quickly copy it from there.)
A couple of tips:
- Type the address in the search exactly as you would want it to display, with capitalization and punctuation.
- Be aware that the link may be shortened automatically, or that you may have an option to shorten it; if you are going to create a QR code, definitely use a shortened link!
You can copy and use the URL link in a number of ways, on or outside of your website:
- Add it to your site’s ‘Links’ list and it will display in the Links widget, if you use it
- Add a new Text widget, give it a title, and paste the URL with the appropriate HTML coding (see below)
- Use a short version of the URL to create a QR code that is smart-phone readable
- See a working QR code below
- Great for printing on bookmarks or promotional posters
- Contact Sharon at SCKLS for more information on QR codes
The HTML coding will allow you to embed the map image itself. Copy the entire block of code and paste it in a post, using the HTML tab as described below.
Place the cursor where you want the map to appear in your post, then switch from the Visual tab to the HTML tab and paste the copied code. Switch back to Visual, type in your text, save your draft and preview the post. You may need to change the size of the map, depending on the width of your theme’s content area. Just make sure the map doesn’t spill over into your sidebars! (It’s always a good idea to view in different browsers and on different sizes of monitor screens.)
Small maps can be embedded in sidebar widgets, but those are usually too small to be of any real use. You’re probably better off adding a map link in a widget instead of embedding an interactive map itself.
Copy and paste this into your HTML text sidebar widget:
<a href=”http://goo.gl/maps/oWkS“>On the Map</a>
Replace the red text with YOUR map URL, and the blue text with the wording you choose.
See a map link in action in the left sidebar widget named “Find us!”
And a QR code that points to the same map:
Comments
Embed or link to an interactive map — No Comments
HTML tags allowed in your comment: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>