Google Map API integration Bonitasoft 7

Hi,

I am trying to integrate google map api to custom widget of bonitasoft.
basically I want to get Lat, Lon values from clicked locations on Google Map.

Initial HTML code on "Template" in "CUSTOM WIDGET EDITOR"

`    <style>
   #map {
    height: 400px;
    width: 100%;
   }
</style>

<h3>My Google Maps Demo</h3>
<div id="map"></div>
<script>
  function initMap() {
    var uluru = {lat: -25.363, lng: 131.044};
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 4,
      center: uluru
    });
    var marker = new google.maps.Marker({
      position: uluru,
      map: map
    });
  }
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAMkC7HB0coB_Z61akkynJvVXUMip7LYdw&callback=initMap"> </script>`

This code shows google map on "Page Editor" page.
but it does not show Map on Preview Page in UI Designer as well as on deployed page on Bonita Studio.

Best Regards,
Lasantha Prasad