diff --git a/SJPv6/www/here-maps.css b/SJPv6/www/here-maps.css
new file mode 100644
index 0000000..3afb3b1
--- /dev/null
+++ b/SJPv6/www/here-maps.css
@@ -0,0 +1,18 @@
+#geocode #map {
+ display: block;
+ width: 95%;
+ margin-bottom: 3px;
+ height: 450px;
+ background: grey;
+}
+
+#geocode #panel {
+ display: block;
+ width: 95%;
+ min-height: 450px;
+ max-height: 450px;
+ border: 1px solid #e3e3e3;
+ border-radius: 4px;
+ -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
+ box-shadow: inset 0 1px 1px rgba(0,0,0,.05);
+}
diff --git a/SJPv6/www/here-maps.details b/SJPv6/www/here-maps.details
new file mode 100644
index 0000000..906591b
--- /dev/null
+++ b/SJPv6/www/here-maps.details
@@ -0,0 +1,12 @@
+---
+ name: Search for a Location based on an Address
+ description: Request a location using a free-form text input and display it on the map
+ resources:
+ - https://heremaps.github.io/maps-api-for-javascript-examples/test-credentials.js
+ normalize_css: no
+ dtd: html 5
+ wrap: d
+ panel_html: 0
+ panel_js: 0
+ panel_css: 0
+...
\ No newline at end of file
diff --git a/SJPv6/www/here-maps.html b/SJPv6/www/here-maps.html
new file mode 100644
index 0000000..9716048
--- /dev/null
+++ b/SJPv6/www/here-maps.html
@@ -0,0 +1,37 @@
+
+
+
+
+
+ Search for a Location based on an Address
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Search for a Location based on an Address
+
Request a location using a free-form text input and display it on the map.
+
+
This example makes a geocoding request and retrieves the latitude, longitude and
+ complete address details of 200 S Mathilda Ave, Sunnyvale, CA based on a free-form
+ text input. A clickable marker is placed on the location found.
+
+
+
Code
+
Access to the geocoding service is obtained from the H.service.Platform
+ by calling getSearchService(). The geocode() method is used
+ to find a location by passing in the relevant q parameter as defined in
+ Geocoding and Search API v7.
+ The styling and display of the response is under the control of the developer.
+
+
+
diff --git a/SJPv6/www/here-maps.js b/SJPv6/www/here-maps.js
new file mode 100644
index 0000000..7b2e8c2
--- /dev/null
+++ b/SJPv6/www/here-maps.js
@@ -0,0 +1,189 @@
+/**
+ * Calculates and displays the address details of 200 S Mathilda Ave, Sunnyvale, CA
+ * based on a free-form text
+ *
+ *
+ * A full list of available request parameters can be found in the Geocoder API documentation.
+ * see: https://www.here.com/docs/bundle/geocoding-and-search-api-v7-api-reference/page/index.html#/paths/~1geocode/get
+ *
+ * @param {H.service.Platform} platform A stub class to access HERE services
+ */
+
+function geocode(platform) {
+ var geocoder = platform.getSearchService(),
+ geocodingParameters = {
+ q: 'Chennai'//'200 S Mathilda Sunnyvale CA'
+ };
+
+ geocoder.geocode(
+ geocodingParameters,
+ onSuccess,
+ onError
+ );
+}
+/**
+ * This function will be called once the Geocoder REST API provides a response
+ * @param {Object} result A JSON object representing the location(s) found.
+ * See: https://www.here.com/docs/bundle/geocoding-and-search-api-v7-api-reference/page/index.html#/paths/~1geocode/get
+ */
+function onSuccess(result) {
+ var locations = result.items;
+ /*
+ * The styling of the geocoding response on the map is entirely under the developer's control.
+ * A representitive styling can be found the full JS + HTML code of this example
+ * in the functions below:
+ */
+ addLocationsToMap(locations);
+ addLocationsToPanel(locations);
+ // ... etc.
+}
+
+/**
+ * This function will be called if a communication error occurs during the JSON-P request
+ * @param {Object} error The error message received.
+ */
+function onError(error) {
+ alert('Can\'t reach the remote server');
+}
+
+/**
+ * Boilerplate map initialization code starts below:
+ */
+
+//Step 1: initialize communication with the platform
+// In your own code, replace variable window.apikey with your own apikey
+var platform = new H.service.Platform({
+ apikey: 'faufZS2XOMIwlELktKbKASVY6kexKiMmH5VxPsyAwmg'//window.apikey
+});
+var defaultLayers = platform.createDefaultLayers();
+
+//Step 2: initialize a map - this map is centered over California
+var map = new H.Map(document.getElementById('map'),
+ defaultLayers.vector.normal.map,{
+ center: {lat:37.376, lng:-122.034},
+ zoom: 15,
+ pixelRatio: window.devicePixelRatio || 1
+});
+// add a resize listener to make sure that the map occupies the whole container
+window.addEventListener('resize', () => map.getViewPort().resize());
+
+var locationsContainer = document.getElementById('panel');
+
+//Step 3: make the map interactive
+// MapEvents enables the event system
+// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
+var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
+
+// Create the default UI components
+var ui = H.ui.UI.createDefault(map, defaultLayers);
+
+// Hold a reference to any infobubble opened
+var bubble;
+
+/**
+ * Opens/Closes a infobubble
+ * @param {H.geo.Point} position The location on the map.
+ * @param {String} text The contents of the infobubble.
+ */
+function openBubble(position, text){
+ if(!bubble){
+ bubble = new H.ui.InfoBubble(
+ position,
+ {content: text});
+ ui.addBubble(bubble);
+ } else {
+ bubble.setPosition(position);
+ bubble.setContent(text);
+ bubble.open();
+ }
+}
+
+/**
+ * Creates a series of list items for each location found, and adds it to the panel.
+ * @param {Object[]} locations An array of locations as received from the
+ * H.service.GeocodingService
+ */
+function addLocationsToPanel(locations){
+
+ var nodeOL = document.createElement('ul'),
+ i;
+
+ nodeOL.style.fontSize = 'small';
+ nodeOL.style.marginLeft ='5%';
+ nodeOL.style.marginRight ='5%';
+
+
+ for (i = 0; i < locations.length; i += 1) {
+ let location = locations[i];
+ var li = document.createElement('li'),
+ divLabel = document.createElement('div'),
+ address = location.address,
+ content = '' + address.label + '';
+ position = location.position;
+
+ content += 'houseNumber: ' + address.houseNumber + ' ';
+ content += 'street: ' + address.street + ' ';
+ content += 'district: ' + address.district + ' ';
+ content += 'city: ' + address.city + ' ';
+ content += 'postalCode: ' + address.postalCode + ' ';
+ content += 'county: ' + address.county + ' ';
+ content += 'country: ' + address.countryName + ' ';
+ content += 'TimeZone: ' + JSON.stringify(location.timeZone) + ' ';
+ content += 'position: ' +
+ Math.abs(position.lat.toFixed(4)) + ((position.lat > 0) ? 'N' : 'S') +
+ ' ' + Math.abs(position.lng.toFixed(4)) + ((position.lng > 0) ? 'E' : 'W') + ' ';
+
+ divLabel.innerHTML = content;
+ li.appendChild(divLabel);
+
+ nodeOL.appendChild(li);
+ }
+
+ locationsContainer.appendChild(nodeOL);
+}
+
+
+/**
+ * Creates a series of H.map.Markers for each location found, and adds it to the map.
+ * @param {Object[]} locations An array of locations as received from the
+ * H.service.GeocodingService
+ */
+function addLocationsToMap(locations){
+ var group = new H.map.Group(),
+ position,
+ i;
+
+ // Add a marker for each location found
+ for (i = 0; i < locations.length; i += 1) {
+ let location = locations[i];
+ marker = new H.map.Marker(location.position);
+ marker.label = location.address.label;
+ group.addObject(marker);
+ }
+
+ group.addEventListener('tap', function (evt) {
+ map.setCenter(evt.target.getGeometry());
+ openBubble(
+ evt.target.getGeometry(), evt.target.label);
+ }, false);
+
+ // Add the locations group to the map
+ map.addObject(group);
+ map.setCenter(group.getBoundingBox().getCenter());
+}
+
+// Now use the map as required...
+geocode(platform);
+function searchLocation(){
+ var geocoder = platform.getSearchService(),
+ geocodingParameters = {
+ q: document.getElementById("location").value,
+ show: "tz"//'Chennai'//'200 S Mathilda Sunnyvale CA'
+ };
+
+ geocoder.geocode(
+ geocodingParameters,
+ onSuccess,
+ onError
+ );
+ }
\ No newline at end of file
diff --git a/SJPv6/www/img/arrows.png b/SJPv6/www/img/arrows.png
new file mode 100644
index 0000000..f71e74a
Binary files /dev/null and b/SJPv6/www/img/arrows.png differ