This module allows you to create maps using Google maps webcomponent behind the scene
Note that the map has 100% height, so you would resize the map based on the parent view
import GoogleMaps.Map as Map
mapView : String -> Html Msg
mapView apiKey =
Map.init apiKey
|> Map.toHtml
import GoogleMaps.Map as Map
mapView : String -> Html Msg
mapView apiKey =
Map.init apiKey
|> Map.withZoom 12
|> Map.withMapType Map.satellite
|> Map.onMapReady MyMsg
|> Map.withCenter -3.7715105 -38.5724269
|> Map.withDefaultUIControls False
|> Map.toHtml
Opaque type that upholds the map description.
Upholds the possible types of surface for viewing the map.
String
API key provided by Google for accessing their maps' services.
Basics.Float
This type is latitude in float format as expected by Google Maps.
Basics.Float
This type is longitude in float format as expected by Google Maps.
init : ApiKey -> Map msg
It requires the api key whose type is String
toHtml : Map msg -> Html msg
The final function to generate the final html
You can use those functions in order to enable/disable UI controls such as StreetView button, zoom and etc
By default all the controls are enabled
withDefaultUIControls : Basics.Bool -> Map msg -> Map msg
Embeds buttons for controlling the map viewing.
withMapTypeControls : Basics.Bool -> Map msg -> Map msg
Embeds buttons for the user to change the map type in runtime.
withStreetViewControls : Basics.Bool -> Map msg -> Map msg
Provides a button for entering the Street View mode.
withZoomActions : Basics.Bool -> Map msg -> Map msg
Provides a scrolling bar for controlling the current zooming in the map.
withMapType : MapType -> Map msg -> Map msg
Sets the mapType.
The default type is roadmap.
Possible options:
satellite, roadmap, hybrid, terrain
Example:
import GoogleMaps.Map as Map
mapView : String -> Html Msg
mapView apiKey =
Map.init apiKey
|> Map.withMapType Map.satellite
|> Map.toHtml
hybrid : MapType
Map with the actual photos of the terrain surface like satellite. While including the roads, and names from roadmap
roadmap : MapType
Map focusing on a presentation of the available driveable paths.
satellite : MapType
Map with actual photos of the terrain surface.
terrain : MapType
Map with terrain specifications, mountains, rivers, and other geospatial information.
Handles the fleet-engine's journey-sharing feature.
Handles the fleet-engine's location provider.
withJourneySharing : JourneySharing -> Map msg -> Map msg
Sets the journey-sharing feature.
journeySharing : String -> LocationProvider -> JourneySharing
Specifies the journey-sharing feature.
locationProvider : String -> String -> LocationProvider
Specifies a location provider for the fleet-engine.
withCenter : Latitude -> Longitude -> Map msg -> Map msg
Sets the center of the map
withCustomStyle : String -> Map msg -> Map msg
The idea is make it typed, but right know you should pass the JSON as string
Reference: https://developers.google.com/maps/documentation/javascript/styling
withFitToMarkers : Basics.Bool -> Map msg -> Map msg
This option is diesabled by default. If the option is enabled the map bounds change in order to fit all the markers. If there is 1 marker only then the map will be centered to the marker position.
withMarkers : List (GoogleMaps.Marker.Marker msg) -> Map msg -> Map msg
import GoogleMaps.Map as Map
import GoogleMaps.Marker as Marker
myMarker : Marker.Marker Msg
myMarker =
Marker.init -3.7344654 -38.5057405
mapView : String -> Html Msg
mapView apiKey =
Map.init apiKey
|> Map.withMarkers [ myMarker ]
|> Map.toHtml
withMaxZoom : Basics.Int -> Map msg -> Map msg
Default value is 20
withMinZoom : Basics.Int -> Map msg -> Map msg
Default value is 0
withPolygons : List (GoogleMaps.Polygon.Polygon msg) -> Map msg -> Map msg
import GoogleMaps.Map as Map
import GoogleMaps.Polygon as Polygon
myPolygon : Polygon.Polygon Msg
myPolygon =
Polygon.init
[ ( -3.7344654, -38.5057405 )
, ( -3.7366108, -38.5188557 )
, ( -3.7374002, -38.5195225 )
, ( -3.7474947, -38.5153675 )
]
|> Polygon.withStrokeColor "red"
|> Polygon.withFillColor "orange"
|> Polygon.withFillOpacity 0.25
|> Polygon.withClosedMode
mapView : String -> Html Msg
mapView apiKey =
Map.init apiKey
|> Map.withPolygons [ myPolygon ]
|> Map.toHtml
withZoom : Basics.Int -> Map msg -> Map msg
Default zoom is 14
onMapClick : msg -> Map msg -> Map msg
Triggers with every click on the map.
onMapReady : msg -> Map msg -> Map msg
Triggers once the map is loaded.
withDrawingTool : GoogleMaps.Plugins.DrawingTool.State -> GoogleMaps.Plugins.DrawingTool.Events msg -> Map msg -> Map msg
Provides a controllable feature of allowing the user to draw polygons on the map.