HERE Maps API - How to show a Place on a web page
m (Jasfox - typo.) |
m (Jasfox - Updated example to use Nokia Maps API 2.2) |
||
| Line 3: | Line 3: | ||
| − | In this example we will use the [http://api.maps.nokia.com/places/ Nokia Places API] to get information of a specific place and to render that date on the web page with the use of the default template. There are a set of templates you can use for your purposes. | + | In this example we will use the [http://api.maps.nokia.com/en/places/intro.html Nokia Places API] to get information of a specific place and to render that date on the web page with the use of the default template. There are a set of templates you can use for your purposes. |
The information displayed consists of the name of the place next to a POI category icon, the address and contact details on a map centered to the POI icon. | The information displayed consists of the name of the place next to a POI category icon, the address and contact details on a map centered to the POI icon. | ||
| Line 30: | Line 30: | ||
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" /> | <meta http-equiv="Content-Type" content="text/html; charset=us-ascii" /> | ||
<title>Sharing a Place</title> | <title>Sharing a Place</title> | ||
| − | <script src= | + | <script src="http://api.maps.nokia.com/2.2.0/jsl.js?with=places" type="text/javascript" charset="utf-8"></script> |
| − | </script> | + | |
<style type="text/css"> | <style type="text/css"> | ||
/*<![CDATA[*/ | /*<![CDATA[*/ | ||
| Line 51: | Line 50: | ||
<div id="Place"></div><script type="text/javascript"> | <div id="Place"></div><script type="text/javascript"> | ||
//<![CDATA[ | //<![CDATA[ | ||
| + | |||
| + | ///////////////////////////////////////////////////////////////////////////////////// | ||
| + | // Don't forget to set your API credentials | ||
| + | // | ||
| + | // Replace with your appId and token which you can obtain when you | ||
| + | // register on http://api.developer.nokia.com/ | ||
| + | // | ||
| + | nokia.Settings.set( "appId", "YOUR APP ID GOES HERE"); | ||
| + | nokia.Settings.set( "authenticationToken", "YOUR AUTHENTICATION TOKEN GOES HERE"); | ||
| + | |||
| + | ///////////////////////////////////////////////////////////////////////////////////// | ||
var basicPlace = new nokia.places.Place({ | var basicPlace = new nokia.places.Place({ | ||
| Line 76: | Line 86: | ||
[http://api.maps.nokia.com/places/ http://api.maps.nokia.com/places/] | [http://api.maps.nokia.com/places/ http://api.maps.nokia.com/places/] | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| Line 87: | Line 91: | ||
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] --> | |sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] --> | ||
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) --> | |installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) --> | ||
| − | |devices= | + | |devices= Internet Explorer, Google Chrome, Firefox, Safari |
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Nokia Qt SDK 1.1]) --> | |sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Nokia Qt SDK 1.1]) --> | ||
| − | |platform= | + | |platform= Web |
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) --> | |devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) --> | ||
| − | |dependencies=Nokia Maps 2. | + | |dependencies=Nokia Maps 2.2.0 |
|signing=<!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer --> | |signing=<!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer --> | ||
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. --> | |capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. --> | ||
| Line 108: | Line 112: | ||
}} | }} | ||
{{SeeAlso| | {{SeeAlso| | ||
| − | * [http://api.maps.nokia.com/places/ Nokia Places API] }} | + | * [http://api.maps.nokia.com/en/places/intro.html Nokia Places API] }} |
Revision as of 10:22, 20 April 2012
Contents |
Introduction
In this example we will use the Nokia Places API to get information of a specific place and to render that date on the web page with the use of the default template. There are a set of templates you can use for your purposes.
The information displayed consists of the name of the place next to a POI category icon, the address and contact details on a map centered to the POI icon.
To the results it is possible to add a list of reviews, ratings, accepted payment methods, photos taken.
The HTML page has a div element on which the information will be displayed.
In this simple example, we will only call the Place constructor using two parameters:
targetNode - indicates where to display the place data. placeId - the id of the location for which data is to be fetched and displayed.
Implementation
This is a fully working example code in HTML and JavaScript.
Example code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
<title>Sharing a Place</title>
<script src="http://api.maps.nokia.com/2.2.0/jsl.js?with=places" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
/*<![CDATA[*/
.nokia-places-general-bubble a.nokia-share
{ color: #0099BB;
font-weight: normal;
font-size: 12px;
font-family: Arial;
text-decoration: none;
}
/*]]>*/
</style>
<title></title>
</head>
<body>
<div id="Place"></div><script type="text/javascript">
//<![CDATA[
/////////////////////////////////////////////////////////////////////////////////////
// Don't forget to set your API credentials
//
// Replace with your appId and token which you can obtain when you
// register on http://api.developer.nokia.com/
//
nokia.Settings.set( "appId", "YOUR APP ID GOES HERE");
nokia.Settings.set( "authenticationToken", "YOUR AUTHENTICATION TOKEN GOES HERE");
/////////////////////////////////////////////////////////////////////////////////////
var basicPlace = new nokia.places.Place({
placeId: '250u0ts2-78a011f821684d489e709ad6a3329fac',
targetNode: 'Place',
template: 'nokia.blue.extended' });
/* * There are 3 predefined templates you can use:
* 'nokia.blue.place'
* 'nokia.blue.extended'
* 'nokia.general.place'
* 'nokia.general.placesmall'
* 'nokia.general.bubble'
*/
//]]>
</script>
</body>
</html>
For more on Nokia Places API
Please check out the Places API full documentation and API reference here:
http://api.maps.nokia.com/places/
