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.
+
This example makes a geocoding request to the
+ Geocoding and Search API v7
+ retrieving latitude, longitude and
+ complete details of the address in the text input.
+ Try it yourself and type an address.
+
+
+
+
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.
+ 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/geocode-a-location-from-address/demo.js b/geocode-a-location-from-address/demo.js
index 096b907..0d54715 100644
--- a/geocode-a-location-from-address/demo.js
+++ b/geocode-a-location-from-address/demo.js
@@ -1,41 +1,37 @@
/**
- * 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: http://developer.here.com/rest-apis/documentation/geocoder/topics/resource-geocode.html
- *
- * @param {H.service.Platform} platform A stub class to access HERE services
+ * Geocode the address in the input text field and center the map on success.
*/
-function geocode(platform) {
- var geocoder = platform.getSearchService(),
- geocodingParameters = {
- q: '200 S Mathilda Sunnyvale CA'
- };
+ function geocode() {
+ const address = document.getElementById('geocodeAddress').value;
+ /*
+ * A full list of available request parameters can be found in the Geocoder API documentation.
+ * See: http://developer.here.com/rest-apis/documentation/geocoder/topics/resource-geocode.html
+ */
+ const geocodingParameters = {
+ q: address
+ };
+
+ if (!address) {
+ return;
+ }
- geocoder.geocode(
+ geocodingService.geocode(
geocodingParameters,
onSuccess,
onError
);
}
+
/**
* This function will be called once the Geocoder REST API provides a response
- * @param {Object} result A JSONP object representing the location(s) found.
+ * @param {Object} result A JSON object representing the location(s) found.
*
- * see: http://developer.here.com/rest-apis/documentation/geocoder/topics/resource-type-response-geocode.html
+ * See: http://developer.here.com/rest-apis/documentation/geocoder/topics/resource-type-response-geocode.html
*/
-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:
- */
+ function onSuccess(result) {
+ const locations = result.items;
addLocationsToMap(locations);
addLocationsToPanel(locations);
- // ... etc.
}
/**
@@ -47,56 +43,38 @@ function onError(error) {
}
/**
- * Boilerplate map initialization code starts below:
- */
+ * Boilerplate map initialization code starts below
+*/
-//Step 1: initialize communication with the platform
+// 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({
+const platform = new H.service.Platform({
apikey: window.apikey
});
-var defaultLayers = platform.createDefaultLayers();
+const defaultLayers = platform.createDefaultLayers();
-//Step 2: initialize a map - this map is centered over California
-var map = new H.Map(document.getElementById('map'),
+// Step 2: initialize a map - this map is initially centered over California
+const map = new H.Map(document.getElementById('map'),
defaultLayers.vector.normal.map,{
- center: {lat:37.376, lng:-122.034},
+ 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');
+const 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));
+// Step 3: make the map interactive
+// MapEvents enables the event system
+// Behavior implements default interactions for pan/zoom (also on mobile touch environments)
+const behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
// Create the default UI components
-var ui = H.ui.UI.createDefault(map, defaultLayers);
+const 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();
- }
-}
+// Create an instance of the Geocoding and Search service
+const geocodingService = platform.getSearchService();
/**
* Creates a series of list items for each location found, and adds it to the panel.
@@ -104,22 +82,21 @@ function openBubble(position, text){
* H.service.GeocodingService
*/
function addLocationsToPanel(locations){
-
- var nodeOL = document.createElement('ul'),
- i;
+ const nodeOL = document.createElement('ul');
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 = '