Search for a Location given a Structured Address
Request a location from a structured address and display it on the map.
HTML
<link rel="stylesheet" href="https://js.api.here.com/v3/3.0/mapsjs-ui.css">
<!-- SCRIPTS -->
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-core.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-service.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-ui.js"></script>
<script type="text/javascript" src="https://js.api.here.com/v3/3.0/mapsjs-mapevents.js"></script>
<!-- BODY -->
<h1>Search for a Location given a Structured Address</h1>
<p>This example makes a geocode request and retrieves the latitude, longitude and complete address details of <b>425 Randolph St, Chicago, IL</b> based on partial address information. Two addresses are found - <i>425 E Randolph St</i>, and <i>425 W Randolph St</i>. A clickable marker is placed on each location found.</p>
<hr/>
<div id="map" style="width: 600px; height: 300px; background: grey;" ></div>
<hr/>
<div id="panel" style="width: 600px; "></div>
CSS
code, h1, h2, h3{
color: #124191;
letter-spacing: -0.03em;
}
body {
font-family:"Lucida Grande",Tahoma,sans-serif;
color: rgb(102, 102, 102);
font-size: 80%;
}
b, strong {
color: black;
}
code {
font-weight: 700;
font-size: 120%;
}
JavaScript
/**
* Calculates and displays the address details of 425 Randolph St, Chicago, IL
* based on a structured input
*
*
* 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
*/
function geocode(platform) {
var geocoder = platform.getGeocodingService(),
geocodingParameters = {
housenumber: '425',
street: 'randolph',
city: 'chicago',
country: 'usa',
jsonattributes : 1
};
geocoder.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.
*
* see: http://developer.here.com/rest-apis/documentation/geocoder/topics/resource-type-response-geocode.html
*/
function onSuccess(result) {
var locations = result.response.view[0].result;
/*
* 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('Ooops!');
}
/**
* Boilerplate map initialization code starts below:
*/
//Step 1: initialize communication with the platform
var platform = new H.service.Platform({
app_id: 'DemoAppId01082013GAL',
app_code: 'AJKnXv84fjrb0KIHawS0Tg',
useCIT: true,
useHTTPS: true
});
var defaultLayers = platform.createDefaultLayers();
//Step 2: initialize a map - this map is centered over California
var map = new...