Phenix Storybook

Pick a theme

Displays Riders

Google Map

Map markers Open in playground 
<.live_component module={GoogleMap} class="h-full w-full" markers={%{default: [%{id: 0, lat: 48.78603, lng: 2.58738}, %{id: 1, lat: 48.88, lng: 2.38}, %{id: 2, lat: 48.8734, lng: 2.38302}]}}/>
Clustered map markers Open in playground 
<.live_component module={GoogleMap} class="h-full w-full" markers={%{default: [%{id: 0, lat: 48.78603, lng: 2.58738}, %{id: 1, lat: 48.88, lng: 2.38}, %{id: 2, lat: 48.8734, lng: 2.38302}]}} marker_clusters={%{default: true}}/>
Marker colors Open in playground 
<.live_component module={GoogleMap} class="h-full w-full" markers={%{green: [%{id: 1, lat: 48.8734, lng: 2.383}], blue: [%{id: 0, lat: 48.8742, lng: 2.3454}]}} marker_radius={%{green: 1000, blue: 500}} marker_colors={%{green: "#00FF00", blue: "#0000FF"}}/>
Marker template Open in playground 
<.live_component module={GoogleMap} class="h-full w-full" markers={%{green: [%{id: 1, lat: 48.8734, lng: 2.383}], blue: [%{id: 0, lat: 48.8742, lng: 2.3454}]}} marker_template="<div><h2><%%= name %></h2></div>"/>
Marker focus Open in playground 
<.live_component module={GoogleMap} class="h-full w-full" focused_marker_id={0} markers={%{default: [%{id: 0, lat: 48.78603, lng: 2.58738}, %{id: 1, lat: 48.8734, lng: 2.38302}]}}/>