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.

223 comments:

«Oldest   ‹Older   201 – 223 of 223
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

divi said...

thanks for your information really good and very nice web design company in velachery

wizzo said...

As a consequence, developing a good SEO involves many obstacles, the largest being how a search engines rank websites is unknown to everyone. Christopher Tzitzis In a period when the Internet is the source for most people to discover an item or service they require, there is no better investment than website improvement for your business.

wizzo said...

The benefits of a good SEO are huge, from your sites ranking within keyword searches to increasing the possibility of conversion. Sir Links a lot As more businesses are utilising the internet, you need to take necessary actions to keep your business aloft and visible among your strong competitors.

divi said...

Excellent post for the people who really need information for this technology.thanks for your information really good and very nice web design company in velachery

clothes said...

Do you think Google will lower it's expectations or expect websites to improve to their standard? Google released the 'mobile friendly' update knowing that somewhere around 80% of websites would need to be upgraded - and they did it anyway as it benefitted over 50% of there users. straight from the source The advent of the internet and its development had been immensely beneficial for the business and marketing world.

Priyanka said...

Attend The Data Analytics Course From ExcelR. Practical Data Analytics Course Sessions With Assured Placement Support From Experienced Faculty. ExcelR Offers The Data Analytics Course.
ExcelR Data Analytics Course

2009 DREAM said...

Very interesting blog. Alot of blogs I see these days don't really provide anything that I'm interested in, but I'm most definately interested in this one. Just thought that I would post and let you know. Kansas City Seo

akalya said...

nice..
INTERNSHIP PROGRAM FOR BSC STUDENTS
FINAL YEAR PROJECT IDEAS FOR INFORMATION TECHNOLOGY
CCNA COURSE IN CHENNAI
ROBOTICS COURSES IN CHENNAI
INTERNSHIP IN CHENNAI FOR ECE
CCNA TRAINING IN CHENNAI
PYTHON INTERNSHIP IN CHENNAI
INDUSTRIAL VISIT IN CHENNAI
INTERNSHIP FOR CSE STUDENTS IN CHENNAI
ROBOTICS TRAINING IN CHENNAI

anandhi said...

Very informative. Thanks for the post I have book marked this blog
Kenya Shared Web Hosting
Dominican Republic Web Hosting
Dominican Republic Jordan Web Hosting
Dominican Republic Kazakhstan Web Hosting
Dominican Republic Web Hosting Korea
Dominican Republic Web Hosting Timor Lestes
Dominican Republic Costa Rica Web Hosting

anandhi said...

Dominican Republic Hong Kong Web Hosting
Dominican Republic Slovakia Web Hosting
Dominican Republic Bahrain Web Hosting
Dominican Republic Web Hosting India
Dominican Republic Iran Web Hosting
Dominican Republic Moldova Web Hosting
Dominican Republic Turkey Web Hosting

Priya said...

Very Informative...Glad to find your blog...Keep Sharing...
TESTING & TRAINING ON SELENIUM
ORACLE TRAINING IN CHENNAI
PYTHON TRAINING IN CHENNAI
DATA SCIENCE TRAINING IN CHENNAI

Priya said...

INTERNSHIP IN AUTOMOBILE COMPANIES IN CHENNAI
FINAL YEAR PROJECT FOR INFORMATION TECHNOLOGY
EEE INTERNSHIP
IMPLANT TRAINING CERTIFICATE FORMAT
IPT IN CHENNAI
AERONAUTICAL INTERNSHIP IN INDIA
INTERNSHIPS FOR EEE STUDENTS
INTERNSHIP WITH STIPEND
INTERNSHIP FOR EEE STUDENTS IN CHENNAI
LIST OF ARCHITECTURAL FIRMS FOR INTERNSHIP IN INDIA

selenium said...

A trader bought a car at 20% discount on its original price. He sold it at a 40% increase on the price he bought it. What percent of profit did he make on the original price?
Hack TP link wifi
How to Hack Mobile Hotspot
A trader bought a car at 20 discount
VCB Breaker Rating Calculation
100 Python Interview Questions and Answers PDF free download
jsondecodeerror: extra data
Resume for Computer Science Student Fresher
TP link Hack
max integer javascript

Softgen Infotech said...

Post is very useful. Thank you, this useful information.

Get Best Dell Boomi Training in Bangalore from Real Time Industry Experts with 100% Placement Assistance in MNC Companies. Book your Free Demo with Softgen Infotech.

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