Realtime- YouBike information

Realtime- YouBike information uses Google Map as base.
It shows realtime Youbike data from Data.Taipei.(open data from Taipei government, Taiwan)

• Data.Taipei :
  http://data.taipei
  
• Realtime youbike data:
  http://data.taipei/opendata/datalist/datasetMeta?oid=8ef1626a-892a-4218-8344-f7ac46e1aa48

I'm using:

• Java 8
• Google Map API
• Javascript ES6
• Jquery 3.3.1
• Bootstrap 4.0

Features:

1.Realtime YouBike inforamtion in Taipei City

From this map, you can see all bike stops showing on the map as markers.
Move the mouse on top of the marker will show up an infowindow with realtime YouBike information, which contains:

• Site Name
  
• Site Address
  
• Available Bikes Number
  
• Residual Space
  
• Lastest Update Time
  

2.Different colors of marker

On the map, there are two different colors of markers.
One is green, another is orange.
The former represents that there are available Bikes and space in the YouBike site, and vice versa.

3.My Position

My Position will change the center of the map to the geographical position of user.
But this does not work in Safari with localhost :(
Use Chrome to try this out!

4.Near-Me

Near-ME will take the geographical position of user as center and draw a circle with a radius of 500 meters on the map.
It will only shows the Youbike sites which are in the range and it's draggable.