Phoenix Live View for Real-time Google Maps positions?

Phoenix Forum Questions / Help
,
1

I haven’t had time to look into Live View yet, although I’m very excited to do so soon.

One thing I will need in the near future is to add a map that will frequently update object map pointer positions.

Is this a use-case that would be covered by Live View?

1 Like
2

I don’t see how it wouldn’t possible. Worst case scenario you have to write some JS to push changes to the Map as states change. I’d check out https://developers.google.com/maps/documentation/embed/guide to embed the map in a LiveView and handle an update to change the Place/location attribute. That’d be the quickest solution if it works. If the embed is too static, you may have to roll some JS to interact with the map as the Liveview state change events come in (https://developers.google.com/maps/documentation/javascript/markers). I’ll bet you could do live updates with routes, directions, arrival time estimates - the whole enchilada so long as you have that data coming in. Most logistics software nowadays is hitting the Google Maps API under the hood.

3 Likes
3

Hey! Did you find a solution for this? I have a similar use case.

4

No, still using Nuxt.js

I haven’t had the time to prototype anything in Live View yet, especially things I’m not sure I’d be able to do (or would be a good fit).

Keep us posted if you end up getting it working :innocent:

5

I am still learning, but perhaps you could create a Google Maps Web Component.
LiveView also has JS Hooks that could potentially be utilized.
I have an example repo of using Leaflet.js (similar to Google Maps) with LiveView here. It’s pretty basic, but might help.
The web component I use in the repo looks something like this with Phoenix LiveView.

  <leaflet-map lat="51.505" lng="-0.09">
    <%= for marker <- @markers do %>
      <leaflet-marker
        lat="<%= marker.lat %>"
        lng="<%= marker.lng %>"
        selected="<%= marker.selected %>"
        phx-click="toggle_marker"
        phx-value-id="<%= marker.id %>">
        <leaflet-icon
          icon-url="<%= get_icon_url(marker.selected) %>"
          width="64"
          height="64">
        </leaflet-icon>
      </leaflet-marker>
    <% end %>
  </leaflet-map>
6 Likes