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.master.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>
            var map;

            function initMap() {
               map = new google.maps.Map(document.getElementById("map"), {
                 zoom: 4,
                 center: #{viewGPSController.getLatLngCenter()},
                 mapTypeId: "terrain",
               });
            }

            function setMap(latLngArray) {
                console.log('Call set map with data : ');
                console.log(latLngArray);

                const newPolyline = new google.maps.Polyline({
                  path: latLngArray,
                  geodesic: true,
                  strokeColor: "#FF0000",
                  strokeOpacity: 1.0,
                  strokeWeight: 2,
                });

                if (!latLngArray.length) {
                    console.log("Array is empty!")
                    newPolyline.setMap(null);
                } else {

                    newPolyline.setMap(map);
                }
            }
        </script>

 </ui:define>
 <ui:define name="pageTitle">
      <span>#{piece['viewGPS']}</span>
 </ui:define>
 <ui:define name="filter">
    <j:authorize task="viewGPS">
        <input type="hidden" value="#{viewGPSController}" />
            <p:messages id="messages" autoUpdate="true" />
            <h:panelGrid columns="2" id="panelSearch">
                <h:outputText value="#{piece['date']}" />
                <jl:datePicker value="#{filterBean.data['date']}"
                    id="date" required="true" />

                <h:outputText value="#{piece['salesman']}" />
                <jl:autoComplete comboName="salesman"
                    id="autoCompleteSalesman"
                    value="#{filterBean.data['salesmanAutoComplete']}"
                    args="Y"
                    itemLabel="#{not empty item['code'] and not empty item['name'] ? item['code'].concat(' - ').concat(item['name']): ''}"
                    label="code, name"
                    styleClass="md" />

                <h:outputText />
                <p:commandButton id="searchButton" value="#{piece['search']}"
                    actionListener="#{viewGPSController.doSearch()}"
                    icon="ui-icon ui-icon-search"
                    oncomplete="if (args.latLngArray) setMap(JSON.parse( args.latLngArray ))"/>

            </h:panelGrid>
            <p:defaultCommand target="searchButton"/>
    </j:authorize>
 </ui:define>

 <ui:define name="content">
    <j:authorize task="viewGPS" forbidden="true">
        <h:panelGrid id="mapPanel" width="100%">
            <h3>Google Maps For Tracking Salesman (Ranger)</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 async="async" defer="defer"
                type="text/javascript"
                src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDHOXjZVF9XrwSemKIBRRFupqm6zYEU8K8&amp;callback=initMap&amp;libraries=&amp;v=weekly&amp;channel=2"></script>
        </h:panelGrid>
    </j:authorize>
 </ui:define>
</ui:composition>
</html>