PaackEng / elm-google-maps / GoogleMaps.Map

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

Simple Example

import GoogleMaps.Map as Map

mapView : String -> Html Msg
mapView apiKey =
    Map.init apiKey
        |> Map.toHtml

Complex Example

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

Types


type Map msg

Opaque type that upholds the map description.


type MapType

Upholds the possible types of surface for viewing the map.


type alias ApiKey =
String

API key provided by Google for accessing their maps' services.


type alias Latitude =
Basics.Float

This type is latitude in float format as expected by Google Maps.


type alias Longitude =
Basics.Float

This type is longitude in float format as expected by Google Maps.

Basics

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

UI Controls

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.

MapType

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.

Journey Sharing


type JourneySharing

Handles the fleet-engine's journey-sharing feature.


type LocationProvider

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.

Other Modifiers

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

Events

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.

Plugins

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.