Google Maps

Integrating Maps & Real-Time Location in Hotwire Native – A Complete Guide

Discover how to enhance your Hotwire Native mobile app with real-time maps and location tracking. This guide walks you through integrating map libraries, streaming live location updates, and building location-aware features in a Rails-first workflow.

Nishant Upadhyay

Nishant Upadhyay

— 1 min read
Integrating Maps & Real-Time Location in Hotwire Native – A Complete Guide

This guide helps you to integrate a map feature with location autocomplete and a radius circle in a Ruby on Rails app using StimulusJS, Hotwire Native, and Google Maps JavaScript API.

🧩 Features Covered

  • Auto-detect the user’s current coordinates (based on IP)
  • Search for a place using Google Maps Autocomplete
  • Choose a radius (e.g., 0.1 mi, 0.25 mi, 0.5 mi)
  • Display a radius circle on the map, centred on the selected location
  • Built using Rails + Hotwire (Stimulus controller)

Step 1. Let's Set Up Google Maps JavaScript API

Please make sure that you include the Google Maps JS API with the Places Library in your layout.

<!-- app/views/layouts/application.html.erb -->
<head>
  ...
  <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
  </script>
</head>

Make sure you replace YOUR_API_KEY with your actual API key from Google Cloud Console.

Step 2. Let's create a Stimulus Controller

app/javascript/controllers/map_controller.js

Step 3. Let's create the View File

Step 4. Now, let's set up Controller and Coordinates in Rails

In your controller (e.g., MapsController)

  results = Geocoder.search(Net::HTTP.get(URI.parse("http://checkip.amazonaws.com/")).squish)
   @cords = results.first.coordinates
   @map = User.first
   @user = current_user

Step 5: Let’s Add Route – Complete!


Your functionality is now fully integrated. Feel free to test it in your app.

At Humive, we empower businesses to build intelligent, location-aware mobile apps using Rails + Hotwire Native. With features like real-time location access, map integration, and native performance—all managed from a single codebase—we help you create seamless user experiences with modern mobility in mind.

👉 Have an idea for a location-based app? Let’s bring it to life. Contact us to get started.

Read more