Skip to content

Instantly share code, notes, and snippets.

@simonh1000
Last active October 14, 2015 12:33
Show Gist options
  • Save simonh1000/93d6f1c927af3ed2d38f to your computer and use it in GitHub Desktop.
Save simonh1000/93d6f1c927af3ed2d38f to your computer and use it in GitHub Desktop.
Elm 'SPA' with Google Maps on second page
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Main</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script src="//maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript" src="elm.js"></script>
<script type="text/javascript">
var map = Elm.fullscreen(Elm.Spa);
map.ports.state.subscribe(function(newState) {
console.log(newState);
if (newState == "Page2") {
mapDiv = document.getElementById('map');
var myLatlng = new google.maps.LatLng(43.5, 4.5);
var mapOptions = {
zoom: 10,
center: myLatlng
};
var gmap = new google.maps.Map(mapDiv, mapOptions);
}
});
</script>
</body>
</html>
module Spa where
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import StartApp
import Effects exposing (Effects, Never)
import Task
type State =
Page1
| Transitioning
| Page2
type alias Model = State
type Action =
TransitioningAction
update : Action -> Model -> (Model, Effects Action)
update action model =
if model == Transitioning
then ( Page2, Effects.none )
else if action == TransitioningAction
then ( Transitioning, Effects.tick (\_ -> TransitioningAction) )
else ( model, Effects.none )
view : Signal.Address Action -> Model -> Html
view address model =
case model of
Page1 ->
viewP1 address model
Transitioning ->
viewP2 address model
Page2 ->
viewP2 address model
viewP1 : Signal.Address Action -> Model -> Html
viewP1 address model =
div []
[ button [ onClick address TransitioningAction ] [ text "go to page2" ] ]
viewP2 : Signal.Address Action -> Model -> Html
viewP2 address model =
div []
[ p [] [ text "this is page 2"]
, div [ id "map", mapStyles ] []
]
mapStyles : Attribute
mapStyles =
style
[ ("height", "200px")
, ("width" , "200px")
]
-- TEA
app =
StartApp.start
{ init = (Page1, Effects.none)
, update = update
, view = view
, inputs = []
}
main =
app.html
port tasks : Signal (Task.Task Never ())
port tasks =
app.tasks
-- CUSTOM PORT
port state : Signal String
port state =
Signal.map toString app.model
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment