Maps for onboarding new employees

• 

  Problem Statement

• 

  Idea

• 

  Solution

• 

  Onboarding website UI

• 

  Employees can browse nearby places around the office location

• 

  Employees can look up their commute to the office building

• 

  Custom markers with popups to display the bus stops and routes

• 

  Future Scope

• 

  ...

Inspiration

Getting a new job is a huge change. A new office location, a new commute, new colleagues and hang out places… and a lot more. When you join, you don’t know the time it will take to reach the new building, what trains or buses to take. Maybe you’d wanna know the nearest store from the office to pick up groceries on your way home. Or you’d wanna know where the office bus stops are.

It takes a week to settle in and know all these things. But what if you work remotely for a team based in Hawaii? All your teammates are all the way across the globe and You’re working out of a co-working space alone. What if you want to be prepared? Or you just like looking around and exploring the area before getting there?

What if, this was all a part of your onboarding itself?

What it does

Here comes in Google Maps Platform.

I have a designed an onboarding application to demonstrate the ways we can integrate Google Maps to provide a solution. My main vision was to create an experience for the user where it is the easy to get all the information they need before even going out the door.

How we built it

The approach I took was first- I looked through the YouTube playlists provided by the Google Maps Platform Developers to get an idea about what are the features offered and how I can get started. I settled on a React application and used the @react-google-maps/api package. I also used the Quick Builder for Nearby and Routes functionalities.

Challenges we ran into

• Integrating builder code within React application
• Getting multiple 3D models as markers for WebGL powered map

Accomplishments that we're proud of

• Infoboxes to show Bus routes
• Custom icons for markers

What we learned

• I learnt how to use the Google Maps Platform builder to create maps with no code
• I learnt how to code the maps with custom markers and info boxes within ReactJS

What's next for Maps for onboarding new employees

• 3D map with multiple markers to show bus stops, etc.
• Integrating Places and Directions in the 3D map for better experiences

Built With

• css3
• google-maps
• html5
• javascript
• react