Easiest Way to Implement Google Map in Scala.js

Table of contents

Reading Time: < 1 minute

In this blog, I would explain how to implement Google Map in scala .js. If you are developing your web application in Scala and you want to write javascript functionality in Scala then you should go with scala.js.

To implement Google Map in scala.js, please follow below steps:-

1) Add below code in your HTML file

<script src="https://maps.googleapis.com/maps/api/js"></script>

<div id="map_canvas" style="height: 430px; width: 512px;">

2) Add below function in your Scala class file

@JSExport
def initialize(lat: Double, long: Double) = {
val map_canvas = document.getElementById("map_canvas")
val map_options = lit(center = (jsnew(g.google.maps.LatLng))(lat, long), zoom = 3, mapTypeId = g.google.maps.MapTypeId.ROADMAP)
val gogleMap = (jsnew(g.google.maps.Map))(map_canvas, map_options)
val marker = (jsnew(g.google.maps.Marker))(lit(map = gogleMap, position = (jsnew(g.google.maps.LatLng)(lat, long))))
}

3) Call initialize function in your HTML file.

<script type="text/javascript">

com.knoldus.weather.Weather().initialize(42.2781410217,-74.9159927368)

</script>

For complete source code, go to https://github.com/knoldus/ScalaJs_Weather_Report

1 thought on “Easiest Way to Implement Google Map in Scala.js1 min read”

I have create a type safe scala wrapper for the google maps api. You can find the source for it here.
https://github.com/coreyauger/scalajs-google-maps

Thanks 🙂

Comments are closed.