Easiest Way to Implement Google Map in Scala.js


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.

Screenshot from 2014-09-10 22:51:44

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;"></div>

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

About Ayush Mishra

Ayush is the Sr. Software Consultant @ Knoldus Software LLP. In his 5 years of experience he has become developer with proven experience in architecting and developing web applications. Ayush has a Masters in Computer Application from U.P. Technical University, Ayush is a strong-willed and self-motivated professional who takes deep care in adhering to quality norms within projects. He is capable of managing challenging projects with remarkable deadline sensitivity without compromising code quality. .
This entry was posted in Agile, AJAX, CSS, JavaScript, jQuery, Scala, Web and tagged , , . Bookmark the permalink.

One Response to Easiest Way to Implement Google Map in Scala.js

  1. coreyauger says:

    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 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s