Wednesday, January 28, 2009

Adding Images & IFrames to your Map Points

What are we talking about here?

So let’s say you have a map that depicts all of the countries you have visited.  It’s one thing to have a pin in France and show “Paris, 2008” in the pop up bubble, but it would be a heck of a lot cooler if you could click on that pin and see an image of you next to the Eifel Tower.

Alternatively, maybe you’re looking to provide some information about France to the person looking at the map.  The ability to integrate an IFrame into the pin pop up bubble makes it easy to show the user a fully functional website about French tourism when they click on the pin.

If you followed the couple tutorials that talked about hyperlinks, e-mail and Skype this should be a piece of cake…

 
What does it look like from a spreadsheet perspective?

Just like our last 2 tutorials, the key here is all in the way you enter data into your Google Spreadsheet.  Again, a bit of HTML is all you need.  

Take a look at the second column in the spreadsheet titled Image.  It contains the HTML required to place an image in your pin pop up bubble.

The third column (you will have to scroll right), titled IFrame, contains the HTML required to display an IFrame in your pin pop up bubble.  


Feel free to us the CONCATENATE function to make life easier if you want as explained in the a previous post (Adding Hyperlinks to Your Map Points).

The HTML, while a bit more complex than that needed to produce e-mail and Skype links, is still relatively self explanatory.  In both cases, all you are doing is providing the location of the Image/IFrame.  The IFrame requires some sizing – feel free to play with that to make it appear how you like it. 

You guessed it - from here, all you have to do is assign your fields in Step 2b of the map creation process and you're good to go.  If you have questions feel free to post to the help forum.


What does it look like from a map perspective?

As you might expect, we see the 2 pins plotted on the map below.  When you click on the pin in France you will see an image of the French flag (sorry, I didn’t have a picture of you next to the Eifel Tower).  

Okay, now try clicking on the other pin – which happens to be in Israel.  Give it a second because just like any web page it takes a second to load.  Cool, right – you actually see a website in the bubble with tourist info.



Your toolbox should be starting to fill up now…have fun with it,

--The Map Commissioner (E-mail)

Sunday, January 11, 2009

Adding Email & Skype to Your Map Points

What are we talking about here?
Lots of folks use MapAList to share contact information above and beyond just physical addresses.  We see maps all the time that include email addresses and/or phone numbers in the pin pop up bubbles.  What you may not know is that it's easy to make those email addresses and phone numbers "active".  In other words, you can create your map such that someone looking at it can click on the values in the pin pop up bubbles to initiate an email or a phone call (via Skype).  This makes your map more way more interactive.  Let's take a look at how it's done...

What does it look like from a spreadsheet perspective?
Just like hyperlinks, the key here is all in the way you enter data into your Google Spreadsheet.  A little HTML does the trick.  Using "mailto" and "callto" make this a pretty straightforward process.

Scroll to the right in the frame below and take a look a the third column in the spreadsheet titled E-mail Link.  It contains the HTML required to initiate a clickable email link in your pin pop up bubble.

The fourth column, titled Phone Link, contains the HTML required to initiate a clickable email link in your pin pop up bubble.  Note that the callto tag can be followed by either a telephone number or a Skype ID.  Either will work as long as Skype is configured to "Associate Skype with callto: links: in the SKYPEMENU>TOOLS>OPTIONS>ADVANCED OPTIONS.

Feel free to us the CONCATENATE function to make life easier if you want as explained in the last post (Adding Hyperlinks to Your Map Points).


The HTML is pretty self explanatory so I'm not going to dive into it.  From here, all you have to do is assign your fields in Step 2b of the map creation process and you're good to go.  If you have questions feel free to post to the help forum.

What does it look like from a map perspective?
As you might expect, we see the 2 pins plotted on the map below.  When you click on either pin, you will see 2 links in the pop up bubble.  If you click on the first one, MapAList will initiate an email to help@mapalist.com.  If you click on the second one MapAList will initiate a Skype call to the MapAList help desk.



This is super simple and super powerful.  Give it a try for yourself. 

Hope this was helpful...more to come.

--The Map Commissioner (E-mail)