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

type MapType

type alias ApiKey =

String

type alias Latitude =

Float

type alias Longitude =

Float

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

withMapTypeControls : Bool -> Map msg -> Map msg

withStreetViewControls : Bool -> Map msg -> Map msg

withZoomActions : Bool -> Map msg -> Map msg

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

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

onMapReady : msg -> Map msg -> Map msg

PaackEng/elm-google-maps/2.0.0