I am trying to add google maps to a component that is using sightly. The component will let users select an asset and then grab the lat/long from the assets properties and then show the location with a marker in google map. 

my `googlemap.html` page contains the following at the moment.

```
<div  data-sly-use.ev="Google"
        class="${ev.cssClass || ''}"
        title="${ev.title || ''}"
        data-emptytext="Evernote Asset"
        id="${ev.googleClass || ''}"
        >       

</div>

    <style>
             #map-canvas {
            width: 500px;
            height: 400px;
             }
    </style>

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

    <script>
      function initialize() {
        var mapCanvas = document.getElementById('map-canvas');
        var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
        var mapOptions = {
          center: myLatlng,
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(mapCanvas, mapOptions)
        var marker = new google.maps.Marker({
          position: myLatlng,
          map: map,
          title: 'Hello World!'
        });
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>

```

My Google.java is like this

```
public class Google extends WCMUse {
  public void activate () {
    //grab the lat/long properties for the asset
  }

  public String googleClass() {
    if (lat != null && long != null) 
      return "map-canvas";
    else 
      return "";
  }
  public String getLat() {return lat;}
  public String getLng() {return lng:]
}

```

**Question**
As you can see I have hardcoded the lat/long. How can I get the lat/long from my java class using the getters instead of hardcoding? 

I tried the following but it doesn't work. 

```
<div  data-sly-use.ev="GoogleMap"
        class="${ev.cssClass || ''}"
        title="${ev.title || ''}"
        data-emptytext="Evernote Asset"
        id="${ev.googleClass || ''}"
        >       

    <style>
             #map-canvas {
            width: 500px;
            height: 400px;
             }
    </style>

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

    <script>
      function initialize() {
        var mapCanvas = document.getElementById('map-canvas');
        var myLatlng = new google.maps.LatLng("${ev.lat || ''}","${ev.lng || ''}");
        var mapOptions = {
          center: myLatlng,
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(mapCanvas, mapOptions)
        var marker = new google.maps.Marker({
          position: myLatlng,
          map: map,
          title: 'Hello World!'
        });
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </div>

```