Friday, January 21, 2011

SEO friendly maps with jQuery

In my free time I am working on a social networking site for RC pilots. I have information pages for various RC airfields and I was looking for a good way to display a listing of the fields. Putting markers on an embedded google map is a great way to display this type of data to users. The method I have seen recommended for this is to make separate list and map views. I don't really think that is a great user experience though.

The main reason making two pages is suggested is that maps require many lines of code and JavaScript functions that will dilute your content. The solution I arrived at was to use as little javascript as possible to generate my map. I ended up accomplishing this by using javascript to parse the content of the page to generate the markers.

To be able to easily parse out the data I wanted to display on the map I ended up making my own microformat. I put a class of field on the div that contained each field I was showing on the page. In that div I put the content that I wanted to display in the information popup for each marker. Then in that div I put two spans that contained the latitude and longitude and gave them each a class. The results ended up looking like this:


Then I wrote some javascript to parse this microformat and generate markers for my map. I used jQuery selectors to select each field in the html. For each field the latitude, longitude, and html contents are selected. Then the add_marker method is called to setup the marker with that data. After the marker is created I hide the field div.


Users with javascript will see a map with a bunch of markers that have an information bubble when clicked on. Users that do not have javascript enabled will see a list of field information. The textual content is the same for both users, the users with javascript just get an improved experience.

Go to www.checkthesock.com/fields to see the end result.

209 comments:

«Oldest   ‹Older   201 – 209 of 209
Lyv said...

https://aab-edu.net/

Aditi Ray said...

Home Mart is a site about Home Improvement, Furniture, Home Appliances and many more.
Check out the best
furniture sale
Dog Cages
bedroom furniture nz
entertainment unit

Rathinam said...

Superb blog...!!! Recently i saw your innovative blog and This is very impressed to me. In this content was a very interesting and very comprehensive explanation. Keep it up to the great work...
Oracle Training in Chennai
best oracle training institute in chennai
Unix Training in Chennai
Job Openings in Chennai
Tableau Training in Chennai
Oracle DBA Training in Chennai
Excel Training in Chennai
Linux Training in Chennai
Oracle Training in OMr
Oracle Training in Adyar


SEO Consultant said...

Good that you have an SEO-friendly map.

SEO Philippines

chandhran m said...

It looks awesome article,keep updating..thank you for providing good information...
Air Hostess Training Institute in Bangalore
bBest Aviation Academy in Bangalore
Airline and Airport Management Courses in Bangalore
Ground Staff Training in Bangalore
Airport Management Courses in Chennai
Ground Staff Training in Chennai
Air Hostess Academy in Chennai
Air Hostess Course in Mumbai
Best Aviation Academy in Chennai
Aviation Training Institutes in Bangalore

Unknown said...

I believe there are many more pleasurable opportunities ahead for individuals that looked at your site.

mba
bcom
scope after bsc
courses after bcom

bachelor of law

llb academic

post graduate diploma in computer application

unknown said...

Thanks for a wonderful share. Your article has proved your hard work and experience you have got in this field. Brilliant .i love it reading.
Continue

unknown said...

Nice post. I learn something totally new and challenging on websites I stumbleupon every day. It's always useful to read through articles from other authors and practice something from other sites.
Thanks for sharing this information with us. Download Free Xmod and information. Xmod games dot org

Swapnil said...

Thank you for sharing well good information
it's really helpful.
Sanjivani Group of Institutes, Kopargaon is one among the premier
technical institutes in Maharashtra state in the un-aided sector.
B tech colleges
02423-222862

«Oldest ‹Older   201 – 209 of 209   Newer› Newest»