Now you should see the map on `localhost:9000`

The dependency is already there, so no work there.

So first we add a textfield and a button:

Now check `localhost:9000` if everything works as expected.

We would like to search for an address and see it on the map.

So first let us <b>prepare the needed Google map</b> code.

To make the map available, provide it and its options as a variables:

Provide a function that:

private def geocodeAddress(address: String) { // 1

val geocoder = new Geocoder()

google.maps.event.addDomListener(window, "load", initialize)

}

It's quite interesting to see a stream based Framework (Binding.scala) next to the callback based API (Google maps).

- The Binding.scala solution is really elegant.

- I had, still have some problems that there are compile time exceptions shown by the IDE (Intellij). Some I could get rid of by adding implicit conversions.

- The usage of scala XML to declare the HTML-DOM is really nice. You literally can copy your HTML code directly, just adding the dynamic parts.

Please let me know if there are things:

package example

import com.thoughtworks.binding.{Binding, dom}

import google.maps._

import org.scalajs.dom.raw.HTMLElement

}

@dom private lazy val render: Binding[HTMLElement] = {

<div>

<button class="ui primary button" onclick={event: Event =>

Search Address

</button>

</div>

}

private lazy val opts = google.maps.MapOptions(

center = new LatLng(51.201203, -1.724370),

zoom = 8,

"" // this function needs a String as return type?!

}

val callback = (results: js.Array[GeocoderResult], status: GeocoderStatus) =>

if (status == GeocoderStatus.OK) {

} else {

window.alert("Geocode was not successful for the following reason: " + status)

}

}