Type-safe and Scala-friendly library over Google Maps.
I assume that you have setup a ScalaJS project before. If this is not the case you can follow the instructions and some basic example on the Scala.js homepage.
To get started you will need a google maps api key. You can get an api key here.
Include google maps on your page<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API_KEY"></script>
Add the following dependency to your porject.
resolvers += "Sonatype OSS Snapshots" at "https://oss.sonatype.org/content/repositories/snapshots"
"io.surfkit" %%% "scalajs-google-maps" % "0.0.3-SNAPSHOT",
Here are some of the google maps examples demonstrated in a type safe scalaJS way.
Initialize a map to a location and zoom level.
object ScalaJSGMapExample extends js.JSApp { def main(): Unit = { def initialize() = js.Function { val opts = google.maps.MapOptions( center = new LatLng(51.201203, -1.724370), zoom = 8, panControl = false, streetViewControl = false, mapTypeControl = false) val gmap = new google.maps.Map(document.getElementById("map-canvas"), opts) } google.maps.event.addDomListener(window, "load", initialize) } }
Add a marker to the map.
object ScalaJSGMapExample extends js.JSApp { def main(): Unit = { def initialize() = js.Function { val opts = google.maps.MapOptions( center = new LatLng(51.201203, -1.724370), zoom = 8, panControl = false, streetViewControl = false, mapTypeControl = false) val gmap = new google.maps.Map(document.getElementById("map-canvas"), opts) val marker = new google.maps.Marker(google.maps.MarkerOptions( position = gmap.getCenter(), map = gmap, title = "Marker" )) } google.maps.event.addDomListener(window, "load", initialize) } }Respond to events + Info Window
object ScalaJSGMapExample extends js.JSApp { def main(): Unit = { def initialize() = js.Function { val opts = google.maps.MapOptions( center = new LatLng(51.201203, -1.724370), zoom = 8, panControl = false, streetViewControl = false, mapTypeControl = false) val gmap = new google.maps.Map(document.getElementById("map-canvas"), opts) val marker = new google.maps.Marker(google.maps.MarkerOptions( position = gmap.getCenter(), map = gmap, title = "Marker" )) val contentString = """ <div id="content"> <h1 id="firstHeading" class="firstHeading">Hello World !!</h1> </div> """ val infowindow = new google.maps.InfoWindow(google.maps.InfoWindowOptions( content=contentString )) google.maps.event.addListener(marker, "click", () => { println("Marker click !") infowindow.open(gmap,marker) }) } google.maps.event.addDomListener(window, "load", initialize) } }
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4