Phenix Storybook

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}]}}
/>