How I created an Event Map

Like many of us, I am a learn-as-I-go "Webmaster" and Social Network Creator. Well I am quite pleased with a page I just created with my Network because I used several techniques that I had not attempted up to this point. I pulled tips from here and there and the ingredients came together nicely.

My network is centered around female motorcycle riders, it started locally, but is growing and I would like to make it more attractive to members around the country. So I wanted to add "Search by State" for Events (inspired by Bikerspost.com).

Here's how the project progressed:

1. In the Language Editor I searched for "Event Type" the words used on the Create New Event page. I changed this to "State". So that the members will place state abbreviations in that info box, I also change the "Filmore" text to explain what was required. http://girlriders.ning.com/events/event/new

2. I used a tip from a Creators to then setup links that would be able to located and isolate according to the "type" or "state" http://creators.ning.com/video/how-to-you-use-event-types-for

3. I found an open lisence map on Wikipedia, pre-set with links for each of the states. In my HTML editor I replaced all the links with the ones I created for each state with step #2.

4. I then tried to paste this directly onto a page, but the links no longer lined up properly with the image. So, for the first time I tried iframe! I uploaded my map to my server site, then found instructions for the iframe code. http://www.w3schools.com/TAGS/tag_iframe.asp. I added some code to remove the frame and it all worked almost perfectly.

5. The iframe was too large for the center Ning column and created a scroll bar. Not ideal. So I remembered Jen's Social post on removing the right column http://jensocial.com/group/ningnetworktips/forum/topics/how-to-remo.... Worked like a charm!

I <3 my new Event Map page :) http://girlriders.ning.com/page/search-by-state