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 to see the end result.


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

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.

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.

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

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

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