simonh1000/Main.elm

## index.html
<!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>

## Main.elm
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
	<!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