Last active
October 14, 2015 12:33
-
-
Save simonh1000/93d6f1c927af3ed2d38f to your computer and use it in GitHub Desktop.
Elm 'SPA' with Google Maps on second page
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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