Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@lessless
Last active June 6, 2016 04:37
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save lessless/4b177c19940bf174d41a0eb6cb8615a0 to your computer and use it in GitHub Desktop.
Save lessless/4b177c19940bf174d41a0eb6cb8615a0 to your computer and use it in GitHub Desktop.
Using elm-starter kit and GMaps JavaScript API create a program, which will display a map with a marker on the left
and marker coordinates on the right.
JavaScript is responsible for drawing map, listening to a marker position change and sending updated coordinates to the
Elm program. Elm program will just output updated coordinates on the page.
Possible visual appearance: http://www.awesomescreenshot.com/image/1303608/46dc61234e7baab90cb022ec7ccbd0b4
Things that will help you get started:
- Making Web functional https://www.youtube.com/watch?v=XJ9ckqCMiKk#t=28m40s (since 28m 40s)
- Elm starter kit https://github.com/splodingsocks/elm-starter
- http://www.elm-tutorial.org/en/
Attached files contains basic HTML/CSS to cut it fast.
<body>
<div class="flex-container">
<div id="map"></div>
<div id="app"></div>
</div>
<!-- ELM initialization -->
<script>
Elm.Main.embed(document.getElementById("app"));
</script>
<!-- GMaps initialization -->
<script>
</script>
</body>
.flex-container {
display: flex;
flex-direction: row;
width: 1200px;
justify-content: space-around;
}
#map {
width: 600px;
height: 600px;
margin: auto;
}
#app {
margin: auto;
width: 500px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment