Untitled

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
 xmlns:ui="http://java.sun.com/jsf/facelets"
 xmlns:f="http://java.sun.com/jsf/core"
 xmlns:h="http://java.sun.com/jsf/html"
 xmlns:p="http://primefaces.org/ui"
 xmlns:j="http://jleaf.org/faces"
 xmlns:jl="http://java.sun.com/jsf/composite/jlcomponents">
<ui:composition template="/WEB-INF/layouts/browse.xhtml">
 <ui:define name="headPart">
       <j:lang id="lang" prefix="org.jleaf.erp.mlm.web" />
       <title>#{piece['viewGPS']}</title>

       <style type="text/css">
            /* Set the size of the div element that contains the map */
            #map {
              height: 400px;
              /* The height is 400 pixels */
              width: 100%;
              /* The width is the width of the web page */
            }
       </style>
       <script>
          // Initialize and add the map
          function initMap() {
            // The location of Uluru
            // const uluru = { lat: -25.344, lng: 131.036 };
            const uluru = { lat: -6.188397568253478, lng: 106.77909262274359 };

            // The map, centered at Uluru
            const map = new google.maps.Map(document.getElementById("map"), {
              zoom: 4,
              center: uluru,
            });
            // The marker, positioned at Uluru
            const marker = new google.maps.Marker({
              position: uluru,
              map: map,
            });
          }
        </script>
 </ui:define>
 <ui:define name="pageTitle">
      <span>#{piece['viewGPS']}</span>
 </ui:define>
 <ui:define name="filter">
 </ui:define>

 <ui:define name="content">
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>

    <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&libraries=&v=weekly&channel=2"
      async
      />
 </ui:define>
</ui:composition>
</html>