PaackEng/elm-google-maps/2.3.0

NOTE: the latest version is 2.5.0

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 =
Float

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

type alias Longitude =
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 : Bool -> Map msg -> Map msg

Embeds buttons for controlling the map viewing.

withMapTypeControls : Bool -> Map msg -> Map msg

Embeds buttons for the user to change the map type in runtime.

withStreetViewControls : Bool -> Map msg -> Map msg

Provides a button for entering the Street View mode.

withZoomActions : 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

Map with the actual photos of the terrain surface like satellite. While including the roads, and names from roadmap

Map focusing on a presentation of the available driveable paths.

Map with actual photos of the terrain surface.

Map with terrain specifications, mountains, rivers, and other geospatial information.

Journey Sharing

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

Handles the fleet-engine's location provider.

Sets the journey-sharing feature.

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 : 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 (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 : Int -> Map msg -> Map msg

Default value is 20

withMinZoom : Int -> Map msg -> Map msg

Default value is 0

withPolygons : List (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 : 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 : State -> Events msg -> Map msg -> Map msg

Provides a controllable feature of allowing the user to draw polygons on the map.