The default model is a map zoomed into Sydney, Australia with no markers.

Transforms the Maps HTML view into an arbitrary HTML view. Requires a function that can transform Maps.Msgs into msgs.

import Html
import Html.Event exposing (onClick)
import Maps


type MyMsg = Click | MapsMsg Maps.Msg


...


view msg model =
  Html.div
    []
    [ Maps.view model.map |> Maps.mapView MapsMsg
    , Html.button [ onClick Click ] [ Html.text "Click!" ]
    ]

Change the map inside of a model.

For example, set the width/height of a map and zoom into Seoul, South Korea:

import Maps.Geo
import Maps.Map as Map


let
  seoul = Maps.Geo.latLng 37.532600 127.024612
in
  model
  |> updateMap (Map.setHeight 600)
  |> updateMap (Map.setWidth 1000)
  |> updateMap (Map.viewBounds <| Maps.Geo.centeredBounds 10 seoul)

See Maps.Map for documentation of the Map functions.

Change the markers inside of the model

For example, add markers for some Sydney attractions and then another marker for the city center:

import Maps.Geo
import Maps.Marker as Marker


let
  attractions =
    List.map (uncurry Maps.Geo.latLng)
      [ (-33.852324, 151.210819)
      , (-33.856872, 151.215239)
      , (-33.870397, 151.208835)
      ]
  sydney = Maps.Geo.latLng -33.865143 151.209900
in
  model
  |> updateMarkers (\markers -> List.map Marker.create attractions ++ markers)
  |> updateMarkers ((::) (Marker.create sydney))

See Maps.Marker for documentation of the Marker functions.

Change the areas inside of the model

For example, add some areas to the map:

import Maps.Area exposing (Area, create, withRotation, withBorder, withFill)
import Maps.Geo exposing (latLng)


let
  areas =
    [ ( latLng 54.797 9.425, latLng 54.794 9.435 )
    , ( latLng 54.782 9.436, latLng 54.78 9.438 )
    ]
    |> List.map (\( topLeft, bottomRight ) ->
        create topLeft bottomRight
          |> withRotation 30
          |> withBorder { width = 2, color = "blue" }
          |> withFill "rgba(0, 128, 255, 0.4)"
      )
in
  model
  |> updateAreas (\_ -> areas)

Change the options inside of the model For example, disable dragging and zooming of the map:

import Maps.Internal.Options exposing (Options)


model
|> updateOptions (\o -> { o | enableDrag = False, enablePinch = False, enableZoom = False })