title: Play Framework: How to call a Javascript Function from a Scala Template
body: <p>I have a scala template that shows a bunch of Model objects and gives the user the option to add or delete these objects.</p>
  
  <p>Each model object has some location data associated with it.  I'd like to embed a Google Map on the page, and as users manipulate (add,delete,edit,load) place a marker for each Model object on the map.  </p>
  
  <p>I can get the map loaded correctly, but I don't understand how to call my JS functions from the Scala template directly.  My template looks like this:</p>
  
  <pre><code>    @(stupas:List[Stupa], stupaForm:Form[Stupa])
  @import helper._
  &lt;head&gt;
  &lt;script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=apiKey"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          var map;
          function initialize() {
              var mapOptions = {
                  center: { lat: -34.397, lng: 150.644},
                  zoom: 8
              };
              map = new google.maps.Map(document.getElementById('map_canvas'),
                      mapOptions);
              console.log("map should be init now");
          }
          google.maps.event.addDomListener(window, 'load', initialize);
  
          function addLocation(lat, lon, name) {
              var latLng = new google.maps.LatLng(lat,lon);
              var marker = new google.maps.Marker({
                  position: myLatlng,
                  title:name
              });
              marker.setMap(map);
          }
      &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;h1&gt; Stupas Overview &lt;/h1&gt;
      &lt;div id="map_canvas" style="height: 430px; width: 512px; float:right; top:0px"&gt;&lt;/div&gt;
  
      &lt;ul&gt;
          @for(stupa &lt;- stupas) {
           &lt;li&gt;@stupa.stupaName&lt;/li&gt;
              &lt;ul&gt;
                  &lt;li&gt;Description: @stupa.descritpion&lt;/li&gt;
                  &lt;li&gt;Latitude: @stupa.latitude&lt;/li&gt;
                  &lt;li&gt;Longitude: @stupa.longitude&lt;/li&gt;
                  &lt;img src="@routes.StupaController.getImageForStupa(stupa.stupaName)"/&gt;
                  @form(routes.StupaController.delete(stupa.stupaName)) {
                      &lt;input type="submit" value="Remove Stupa"&gt;
                  }
              &lt;/ul&gt;
          }
  
      &lt;/ul&gt;
  
      @helper.form(action = routes.StupaController.submit, 'enctype -&gt; "multipart/form-data") {
          @helper.inputText(stupaForm("stupaName"))
          @helper.inputText(stupaForm("description"))
          @helper.inputText(stupaForm("latitude"))
          @helper.inputText(stupaForm("longitude"))
          @helper.inputFile(stupaForm("picture"))
          &lt;button type="submit" onclick="" name="addPrayer" &gt;Submit Stupa&lt;/button&gt;
      }
  
  &lt;/body&gt;
  </code></pre>
  
  <p>I'd like to be able to call that addLocation() function.</p>