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.
205 comments:
«Oldest ‹Older 201 – 205 of 205This blog is really nice and informative blog, The explanation given is really comprehensive and informative. Ziyyara Edutech brings you top-notch online tuition for Class 11. Our experienced tutors provide personalized guidance and comprehensive support to help you achieve your academic goals.
For more info Contact us: +91-9654271931, +971-505593798 or visit Online tuition for 11th class
Awesome blog with useful information.. Thanks for sharing such a informative blog. Ziyyara Edutech’s online English class offers the best English tutoring in Bahrain, designed to cater to your specific needs.
Book a free demo today. Online tuition for english language in Bahrain
The information you have posted is very useful. The sites you have referred was good. Thanks for sharing. Struggling with challenging GCSE subjects like Mathematics, Science, and Religious Studies?
For more info visit Online tuition for GCSE
Great experience I got good information from your blog. Say goodbye to the search for "online tuition for class 1 – Ziyyara Edutech program addresses parent pain points head-on.
For more info visit online classes for grade 1st
I think this is the best information for me that I need in the past some time. Ziyyara Edutech's specialized Online GCSE Tuition – where academic challenges become opportunities for growth.
For more info visit online GCSE tuition
Post a Comment