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.
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API_KEY"></script>
Add the following dependency to your porject.
"io.surfkit" %%% "scalajs-google-maps" % "0.1-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)
}
}
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)
}
}