Writing User Interface Code for Using Third-party Libraries in Gadget
1. Navigate to the view.xhtml file of the gadget.
2. Add the following code:
<div class="table">
<div class="row remove-margins table-row " ng-repeat="item in locations
track by $index">
<input type="text" ng-model="item.location" class=
"table-cell location-publish-text" placeholder="Enter city, country, zip
code etc."></input>
<div style="white-space: nowrap;" class="table-cell">
<!-- remove button should not be shown if it is a first entry -->
<button type="button" class="bc-button" data-ng-click="addRow()">
<i class="fa fa-plus"></i>
</button>
<button type="button" class="bc-button"
data-ng-click="removeRow($index)">
<i class="fa fa-minus"></i>
</button>
</div>
</div>
<div class="row remove-margins table-row ">
<input type="button"
value="Publish Locations" ng-click="publishLocation()" class=
"bc-button table-cell"></input>
<input type="button"
value="Clear" ng-click="clearLocation()" class="bc-button
table-cell"></input>
</div>
</div>
<div oc-lazy-load="['js!https://maps.googleapis.com/maps/api/js?key=
YOUR_API_KEY']">
<div class="row remove-margins">
<h4>Maps Gadget</h4>
<label class="location-maps-header"> Use this gadget to display
locations.
</label>
<googlemaps id="google_map_canvas" style="height: 760px;">
</googlemaps> <!--CONTAINER FOR THE MAP. CUSTOM DIRECITVE -->
</div>
</div>
a. Replace the YOUR_API_KEY with the Maps API key you have retrieved from Google.
b. In the first <div>, add a textbox control with plus/minus buttons to add/remove one or more locations.
c. In the second <div>, used a tag called <googlemaps .../>. This is not an HTML tag, but a custom AngularJS directive. By using this directive, we can get a reference to the container and then place our Map pointers accordingly.
d. This <div> also contains a call to Angular lazy loader (oc-lazy-load) to load the Maps API from a URL. The custom directive <googlemaps.../> should go inside the <div> containing the oc-lazy-load attribute.