#107 How to display locations on a map with Mapbox API and gem Mapkick like AirBnB
In the previous episode we learnt to use gem Geocoder to calculate COORDINATES (latitude, longitude) based on address.
In this episode, we will display multiple coordinates on a map. Together with Geocoder search, this will empower us to create interactive maps like AirBnB does!
We will also make the links to the locations CLICKABLE!
Text description: https://blog.corsego.com/gem-mapkick-rb
Episode source code: https://github.com/corsego/107-gem-mapkick/commit/58295c740ec2a0bb96717a31095d93463c15fe03
Gem mapkick: https://github.com/ankane/mapkick
0:00 Previous work with Geocoding
0:54 Airbnb example
1:46 Install Mapkick-RB
2:45 MAPBOX_ACCESS_TOKEN
3:45 display a map with different options
7:23 separate map for each location
8:27 clickable links to locations
10:55 display all locations on ONE map
11:45 customize JSON data
13:41 force JSON data to respond to search params
0
Featured in playlists
![#106 How to use gem Geocoder, GPS coordinates, distance calculation, map markers](https://superails.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTgxMywicHVyIjoiYmxvYl9pZCJ9fQ==--fa5854971fac389163e676e7b0b7e156f2cc91a3/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsNjAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--2d7cd3a4d9675c7f4c17dad7856d799792bd3595/maxresdefault.jpg)
![#107 How to display locations on a map with Mapbox API and gem Mapkick like AirBnB](https://superails.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTgzOSwicHVyIjoiYmxvYl9pZCJ9fQ==--40f3c2cf7034cb0bfd4b3cf58b48de87cf84a0c1/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsNjAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--2d7cd3a4d9675c7f4c17dad7856d799792bd3595/maxresdefault.jpg)
![#108 How to use the Browser Geolocation API with Rails](https://superails.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTg3MSwicHVyIjoiYmxvYl9pZCJ9fQ==--dd678d29d1065aaf26bb39c50fb4f1c877d75ad1/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsNjAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--2d7cd3a4d9675c7f4c17dad7856d799792bd3595/maxresdefault.jpg)
Recommended based on what you are watching now
![A whole train of Ruby developers on RAILS! Literally!](https://superails.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTkzNCwicHVyIjoiYmxvYl9pZCJ9fQ==--a39ab71285a13768cf8684a6fb36b72c3f9fceb2/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsNjAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--2d7cd3a4d9675c7f4c17dad7856d799792bd3595/maxresdefault.jpg)
A whole train of Ruby developers on RAILS! Literally!
![#10: Bootstrap, Friendly ID, ExceptionNotification](https://superails.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTc2OSwicHVyIjoiYmxvYl9pZCJ9fQ==--786747caef6fd0c92b9a22a6dc7cbb7a9a016322/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsNjAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--2d7cd3a4d9675c7f4c17dad7856d799792bd3595/maxresdefault.jpg)
#10: Bootstrap, Friendly ID, ExceptionNotification
![#97 PASSWORDLESS login with MAGIC LINK](https://superails.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTgwOSwicHVyIjoiYmxvYl9pZCJ9fQ==--263202ae0bf79e6660fca51cca6f46b257a56a0a/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsNjAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--2d7cd3a4d9675c7f4c17dad7856d799792bd3595/maxresdefault.jpg)