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.

249 comments:

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

Robin 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

fortnite 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.

fortnite 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

fortnite 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.

hari said...

good
inplant training in chennai
inplant training in chennai
inplant training in chennai for it.php
Bermuda web hosting
Botswana hosting
armenia web hosting
dominican republic web hosting
iran hosting
palestinian territory web hosting
iceland web hosting

hari said...

very good
inplant training in chennai
inplant training in chennai for it
suden web hosting
tunisia hosting
uruguay web hosting
Bermuda web hosting
Botswana hosting
armenia web hosting
lebanon web hosting

hari said...

nice
Bermuda web hosting
Botswana hosting
armenia web hosting
lithuania shared web hosting
inplant training in chennai
inplant training in chennai for it
suden web hosting
tunisia hosting
uruguay web hosting

hari said...

nice
inplant training in chennai
inplant training in chennai
online python internship
online web design
online machine learning internship
online internet of things internship
online cloud computing internship
online Robotics
online penetration testing

Customer relationship management said...

Excellent post for the people who really need information for this technology.

servicenow training in bangalore

servicenow courses in bangalore

servicenow classes in bangalore

servicenow training institute in bangalore

servicenow course syllabus

servicenow course syllabus

servicenow training centers

Johan said...

This is most informative and also this post most user friendly and super navigation to all posts. Thank you so much for giving this information to me.

digital marketing training in bangalore

digital marketing courses in bangalore

digital marketing classes in bangalore

digital marketing training institute in bangalore

digital marketing course syllabus

best digital marketing training

digital marketing training centers

Tuhin said...

keep up the good work. this is an Assam post. this to helpful, i have reading here all post. i am impressed. thank you. this is our digital marketing training center. This is an online certificate course
digital marketing training in bangalore | https://www.excelr.com/digital-marketing-training-in-bangalore

Eliza said...

Very nice article, I enjoyed reading your post, very nice share, I want to twit this to my followers. Thanks!. Lund SEO

preethi minion said...

Awesome blogs.....
robotics courses
inplant training in chennai for eee students
paid internships in hyderabad for cse students
list of architectural firms for internship in india
internship for mca students
matlab training in chennai
final year project for it
internship for production engineering students
aeronautical internship
inplant training report for civil engineering

Moksh Attri said...

Thanks for sharing this such an informative and useful blog!
internet of things (IoT) refers to everything physical that is connected by the internet. A reputed IoT app development company offer data-driven IoT solutions that will help to make real value to your Business.
local SEO reseller

Mahzar said...

Here is the colleges details to study in Bangalore. You can select the best college details from the below mentioned courses that you love to study. The list of colleges are only in Bangalore, so, if you are looking to study in Bangalore, just click the below mentioned links.
BSc Medical Imaging Technology Colleges in Bangalore | Medical Imaging Technology Colleges in Bangalore | BSc Optometry Colleges in Bangalore | Optometry Colleges in Bangalore |BSc Renal Dialysis Colleges in Bangalore | Renal Dialysis Technology Colleges in Bangalore |BSc Respiratory Care Technology Colleges in Bangalore | Respiratory Care Colleges in Bangalore |BSc Cardiac Care Technology Colleges in Bangalore | Cardiac Care Colleges in Bangalore |BSc Perfusion Technology Colleges in Bangalore | Perfusion Technology Colleges in Bangalore |

Malcom Marshall said...

Great post!I am actually getting ready to across this information,i am very happy to this commands.Also great blog here with all of the valuable information you have.Well done,its a great knowledge.

best digital marketing course in chennai
SKARTEC Digital Marketing
best digital marketing training in chennai
best seo training in chennai
online digital marketing training
best marketing books
best marketing books for beginners
best marketing books for entrepreneurs
best marketing books in india
digital marketing course fees
best seo service in chennai
SKARTEC SEO Services
best digital marketing resources
best digital marketing blog
digital marketing expert
how to start affiliate marketing
what is affilite marketing and how does it work
affiliate marketing for beginners

Sophia said...

I keep listening to what is this great update lecture about receiving boundless online grant applications and so i are already shopping for the most beneficial site to obtain one. Could you advise me please, where could i receive some? ecommerce web hosting

subha said...

Very good blog, this blog shares lot of new informations.
PHP Training in Bangalore
PHP Training in Chennai
PHP Classes in Bangalore
Best PHP Training Institute in Bangalore
PHP Course in Bangalore
AWS Training in Bangalore
Data Science Courses in Bangalore
DevOps Training in Bangalore
Spoken English Classes in Bangalore
DOT NET Training in Bangalore

sridharraj said...

Awesome Blog...Thanks for sharing, Waiting for next update...
Hibernate Training in Chennai
Spring Hibernate Training
Spring and Hibernate Training
Hibernate Training in OMR
hibernate training in Porur
Spring Training in Chennai
clinical sas training in chennai
DOT NET Training in Chennai
QTP Training in Chennai
LoadRunner Training in Chennai

sridharraj said...

awesome article,the content has very informative ideas, waiting for the next update...
Hibernate Training in Chennai
Hibernate Training
hibernate training in Velachery
hibernate training in Thiruvanmiyur
hibernate training in Tambaram
Spring Training in Chennai
clinical sas training in chennai
DOT NET Training in Chennai
QTP Training in Chennai
LoadRunner Training in Chennai

Arunvijay said...

Nice post...
Coronavirus Update
Intern Ship In Chennai
Inplant Training In Chennai
Internship For CSE Students
Online Internships
Internship For MBA Students
ITO Internship

karthickannan said...

nice information...
coronavirus update
inplant training in chennai
inplant training
inplant training in chennai for cse
inplant training in chennai for ece
inplant training in chennai for eee
inplant training in chennai for mechanical
internship in chennai
online internship

deiva said...

I enjoyed over read your blog post. Your blog have nice information, I got good ideas from this amazing blog.
Digital Marketing Training Course in Chennai | Digital Marketing Training Course in Anna Nagar | Digital Marketing Training Course in OMR | Digital Marketing Training Course in Porur | Digital Marketing Training Course in Tambaram | Digital Marketing Training Course in Velachery

TIC Academy said...

Great Blog. Thnaks.
SAP Training in Chennai
Java Training in Chennai
Software Testing Training in Chennai
.Net Training in Chennai
Hardware and Networking Training in Chennai
AWS Training in Chennai
Azure Training in Chennai
Selenium Training in Chennai
QTP Training in Chennai
Android Training in Chennai

PrimeItSolution said...

Nice blog thanks for sharing.
web design perth, web design, web development

edan link said...

I thank you for the information and articles you provided cara menggugurkan kandungan dan mempercepat haid

varsha said...

Excellent information with unique content and it is very useful to know about the information based on blogs
AWS training in chennai | AWS training in annanagar | AWS training in omr | AWS training in porur | AWS training in tambaram | AWS training in velachery

Watson Henry said...

This is a major change to the way that professional SEO specialists will be doing business. How this change will affect many professional SEO writers and professional SEO consultants remains to be seen. With as many professional SEO services as are currently out there, there will need to be a change in the way that optimization is done now, with the probable deletion of the search engine rankings after 2009. Until that time most SEO copywriters and SEO services will continue to do business as they have always done. professional seo services

madam said...

Very nice blog. I am really very happy to visit your blog. Now I am found which I actually want. I check your blog everyday and try to learn something from your blog. Thank you and waiting for your new post.data science course in aurangabad

ahmerali 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.

Water Flosser

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