scalajs-google-maps

Type-safe and Scala-friendly library over Google Maps.

Dependency Info

Scala.js.

Get started

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>

Build.sbt

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.2-SNAPSHOT",

Some Examples

Here are some of the google maps examples demonstrated in a type safe scalaJS way.

Simple Map

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)
  }
}

Place a marker

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)
  }
}

drhumlen / scalajs-google-maps