Pin location on map through Note Editor 

Planning a trip is a sweet and painful process. We can dream about what to do or see in the next journey, but it could also be an exhausting experience since we have to use multiple tools to gather all the things we need and make many decisions on different parts of trip planning.

Common tools used in travel planning:

  • Google Search — looking for itineraries, places, sharing, inspiration and reviews among blogs, forums, and social media

  • Google Map —find locations and estimate the traveling time with transportation details

  • Online travel agencies — book flights, hotels, local tours and activities

  • Note / Word / Spreadsheet — gather all information and make an itinerary

This note editor is a place where you can build your map while writing your notes.​

You can find the reference of this project here.

Note and Map at the same place

It’s common to jot down place information and make itineraries on writing editor since it’s easy to use and organize information, but you might not know where these places are located at and how close they are based on their addresses by text.

This design puts the note editor and map together and allows you to pin locations on the map while taking notes. You can simply type “@” to tag a location in the editor and add the location pin on the map simultaneously.

As the tagged locations are visible on the map, you can easily visualize your itinerary and don’t have to worry about missing out nearby recommended restaurants or reserving too much or little time on transportations on your itinerary.

Find directions and add a route into the plan

A simple toggle allows you to quickly open the side panel of transportation navigation right next to the map. You can find the direction, check train schedule and add details to your plan with a single click. You don’t have to switch between the editor and map to look for and copy the details of a route.   

Pin “Must go” place to top

When it comes to writing quick notes and place information down, any places can be a subject. How can we remember our preferences? “Star” button allows you to prioritize the places. Just pin “Must go” places to top, so you can easily recognize them afterwards and check out other tagged places in the vicinity.

Flexible to plan the itinerary

There’s no need to create tables for grouping the locations to visit based on date. Like creating an event on the calendar, you can arrange them by selecting the date and time. The color of location pins indicate the itinerary. You can see the full picture through the map and flexibly adjust the schedule in your own way.

What's Next?

This editor helps note and map work together and you don’t have to switch between them. However, there are still many parts in trip planning we haven’t include, so how can we integrate them into this single platform?  Click here to find out more.

Side note :)

I built a prototype putting document and map together and used it for a few trips before. I found it's easy to tag all the places by typing and see how close they were on the map visually, but it could be hard to read and organize if too many places were tagged in one document. Therefore, I made some changes on the editor UI and turned the writing editor into note cards. Note cards are clear to read and easy to drag and drop, which also inspired me to design a flexible way of “adding route into plan”.

  • email
  • dribbble
  • linkedin