#google maps javascript apis

[bostonfarehikes-blog]

Getting ahead of deadlines

I’m going to be on vacation for the first ten days of October, so I’m getting a bit ahead of my own milestones so that I can afford to slack off while away. 

The hike detail template is rather done, though there’s always potential for some CSS retouches or big fixes in the future. I tried to make adjustments in response to my mini usability test feedback as much as possible. For fun, I added some transparent random background images from my adventures. I also disabled scroll zoom on the map, because that is very annoying when you’re trying to navigate the page. 

Per Jen’s feedback from my advising appointment last Friday, there are now special messages for hikes that are tagged “accessible,” “dog-friendly,” or “bicycle-friendly.” Each notice links to the MBTA webpage with relevant information.  When Jen saw the dog-friendly tag, she asked, “You can bring a dog on the T?” Well, the answer is yes, so long as it’s not rush hour. There are also restrictions in bringing bicycles on the T that are astoundingly complicated. I guess I can’t really help that! I also thought it might be helpful to show users with accessibility concerns where they can get more info on the MBTA website.

With this in mind, I also made the climb level searchable with explicit explanations for what each means (flat, easy, moderate, or intense).

I visited Lynn Woods with a friend this past weekend, and we visited the cellar of Dungeon Rock and checked out the Wolf Pits. (Lynn Woods has some very colorful history.) So, of course I had to add some new pictures. I think I will revisit Drumlin Farm this weekend so that I can climb the Drumlin and get better pictures of the trails -- when I visited it this past March, it was before this project was even an idea, and my sister and I had only gone there for the farm animals! 

Most importantly, I have moved on to working on the homepage - though for now it lives here at /map rather than at the index / (where there’s an Under Construction message). So far, users can only enter an address and find all the markers within a given radius, with the results showing on the map. Before I leave for vacation, though, the results will update in the adjacent thumbnail list, and more options will be added to the form. It’s lots of fun to work on! It needs a mountain of CSS work, too, mainly to make it work for all device widths.

[bostonfarehikes-blog]

So, this is probably cheating, but I didn’t do a facilitated usability test for my first round. I only wanted to test one kind of page -- the hike detail page -- since that’s all that exists of my project so far. When there are lots more pages, I think I will HAVE to watch people click around on the website. For now, for this tiny thing, I thought I could get away with a lazy form approximation of a usability test.

After asking about users’ web habits and device/browser, I showed them this link. I asked them what they thought the web page was for. It’s the detail page for the Charles River Park Reservation. All of the detail pages are rendered from the same exact template: it spits out photos and descriptive details, then generates an interactive form to find directions, and an interactive map with markers for each MBTA-friendly entrance.

Then, I gave them a second link, which was really the same exact thing again, just a different hiking location: Hammond Pond/Webster Conservation. This time, they got a task:

Congratulations! You got into grad school at Northeastern University and moved to Boston. You don’t have a car, and the T is a mystery to you. You’d really love to get out of town this fall, go hiking and check out some beautiful New England foliage. A peer speaks highly of the Webster Conservation in Newton. You decide to go there tomorrow, leaving at 10:30AM, and you'd really prefer to not have to take a bus.

Fortunately, 4/5 respondents completed the task. However, their feedback pointed out some pretty egregious things:

I had played with the CSS on my thumbnail gallery and never set it back from “overflow: scroll” which looks AWFUL on PCs but is unnoticeable on my Macbook. So I had to change that back to “hidden.”

The “more options” link to expand the transit options of the form needed to be a big honking angry NOTICEABLE button

Using the complete variety of transit modes confused people (Google Maps’ transit modes are BUS, RAIL, SUBWAY, TRAM - which I had translated to “Trolley” as my ancient Charlestownie father calls the Green line) - so I scaled it down to bus, commuter rail, and T

Someone was confused by the pins already on the map so I created a big honking h3 for it

Those browsing with larger resolutions were confused by the empty space left to the right of the map to give room for the directions panel that would be generated once they submitted the form. So, I put a clear h4 marking it as a space for Directions. I also moved the list of lines for the selected marker over there so it wouldn’t look so empty.

One less solveable issue that I’d noticed before was pointed out by a user -- sometimes, maybe 1/50 page loads, Chrome fails to load the Google map and the console gives an error about initMap( ) not being a function. initMap( ) is the callback function in the Google Maps Javascript API script -- so Chrome is loading that script, but not loading my custom JS file where I make initMap( ) happen. A quick refresh solves the issue every time, but I’m wondering if I should move my Google Maps related scripts from the end of the body to the head of the page -- even though I KNOW placing scripts at the end is a "best practice.” (I mean, the only way to get my custom CSS for the Directions Panel to work was it place it at the VERY END of the body, which is not the normal place for it at all! CSS links live in the head!!)

So, this gives me something to discuss with Jen tomorrow. Maybe I should give her a usability test!!!!

[bostonfarehikes-blog]

I have gotten a lot done this weekend on the hike detail page, mostly front end stuff. Above is an example! I’ve got a master template in place, and the layout of this page is mostly done. I implemented a whole bunch of map marker animation and color changing depending on which end address is selected. Also, depending on which end address is selected, the lines closest to that entrance are listed, as well as the proximity to the closest station/stop. Users can select their destination using the drop down box OR by clicking a marker, and they can go back and forth between the two. The “selected” destination is always selected in the drop down box and always indicated by an orange marker. THAT TOOK ME A WHILE.

Working with pickadate.js to get a date and time that I could actually use to create Date objects turned out to be a nightmare, but I sorted it. The time and date pickers are optional: you can get directions based on what date/time you want to leave or arrive. I chose pickadate.js because it’s very responsive and pretty even on a mobile browser.

[bostonfarehikes-blog]

It begins

I’m doing some work on the hiking page view. It is lots of fun!!! Here are some examples:

Blue Hills

World’s End

Emerald Necklace Conservancy

Wompatuck State Park

Middlesex Fells

I have LOADS more to do, but I am happy with what I’ve made happen in the past hour and a half.

It looks like the markers’ GPS coordinates are BIT off because the double data type cuts them off at 8 digits after the decimal point. I’m going to have to change the data type!

[bostonfarehikes-blog]

Several of the hiking destinations on my list have more than one entrance, and that complicates things a bit when it comes to giving directions. I can’t just pick ONE address when it might be easy for you to take the bus to 125 X St but you’ve got to make three transfers to get to 500 Y St. It’s just a fun puzzle, though, and I’ll figure it out.

[bostonfarehikes-blog]

Google Maps Javascript APIs Sandboxes

You didn’t think that I’ve just been walking uphill and looking at trees all summer, did you? Well! I have also been playing with Google Maps Javascript APIs to make sure that I can approximately do all the stuff that I want to do with this app. The good news is that I feel confident that I can!

If you want to check out the practice gizmos I built, here’s a page with a map and marker that will give you public transit directions exclusively to the Coolidge Corner Theater. And here’s a page with a map with multiple markers generated from a JSON file that will find the nearest marker(s) within a given range from whatever address you enter! I coded that using the Haversine formula from this JSFiddle by Dan Harper. It’s worth noting that both of these gizmos are completely useless for any address outside of the Metro Boston area, but well that’s who we’re targeting with this project anywho.

[bostonfarehikes-blog]

Hello!

Hello Jen, Jeff, fellow Digital Media Design capstone peers, visiting faculty, nosey family, anonymous Internet lurkers and all interested parties!

I have already begun working on my capstone project this summer, Boston Fare Hikes. BFH will be a navigational web exhibition of all of the hiking locations accessible by MBTA. If you are interested in a great amount of detail, you should read my proposal!

While a detailed post about my summertime work is due in September, some work and photos will be trickling out here in the meantime. So far, I can tell you that I’ve already had fun playing around with Google Maps Javascript APIs, and I’ve enjoyed myself thoroughly on many hikes. I’ve got a pretty sweet tan going, if I may say so. 

Right now, I’m also reading Dayle Rees’ latest book Code Smart for the current version of Laravel. He is a laugh! Before class starts, I will probably make a mini demo app.

My next steps are to write up a rubric for how my project will be graded and identify milestones. The idea of setting my own standards is a bit daunting but still exciting. I will also take any excuse to find more milestones to celebrate with cake.

Thanks for reading! Have a great day!