×
Namespaces

Variants
Actions
(Difference between revisions)

HERE Maps API - How to show a Place on a web page

From Nokia Developer Wiki
Jump to: navigation, search
Maveric (Talk | contribs)
(Maveric -)
 
jasfox (Talk | contribs)
m (Jasfox - update to 2.2.4)
(13 intermediate revisions by 3 users not shown)
Line 1: Line 1:
[[Category:Web]][[Category:Location]]
+
[[Category:Nokia Maps]][[Category:JavaScript]][[Category:Code Snippet]][[Category:Nokia Maps]][[Category:Nokia Maps]]
 
==Introduction==     
 
==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.
+
In this example we will use the places library  of the [http://developer.here.net/javascript_api Nokia Maps API] to get information about a specific place and render that data 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 13: Line 13:
 
In this simple example, we will only call the Place constructor using two parameters:
 
In this simple example, we will only call the Place constructor using two parameters:
  
targetNode - indicates where to display the place data.
+
* {{Icode|targetNode}} - indicates where to display the place data.
placeId - the id of the location for which data is to be fetched and displayed.
+
* {{Icode|placeId}} - the id of the location for which data is to be fetched and displayed.
 
+
  
 
==Implementation==     
 
==Implementation==     
Line 22: Line 21:
  
 
==Example code==
 
==Example code==
 +
This is a full HTML & JavaScript example.  Add in your own [[How to Obtain Your Own Nokia appID and Token| AppId and Token]] and feel free to modify and use for your own purposes.
  
<code>
+
<code javascript>
<html>  
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>    
+
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    
+
<html xmlns="http://www.w3.org/1999/xhtml">
<script src='http://api.maps.ovi.com/places/beta1/jsPlacesAPI.js'></script>
+
<head>
</head>  
+
  <meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
<body>   
+
  <title>Sharing a Place</title>
<style>
+
  <script src="http://api.maps.nokia.com/2.2.4/jsl.js?with=places" type="text/javascript" charset="utf-8"></script>
.nokia-places-general-bubble a.nokia-share
+
  <style type="text/css">
{    color: #0099BB;     
+
/*<![CDATA[*/
 +
 
 +
  .nokia-places-general-bubble a.nokia-share
 +
  {    color: #0099BB;     
 
       font-weight: normal;     
 
       font-weight: normal;     
 
       font-size: 12px;     
 
       font-size: 12px;     
 
       font-family: Arial;     
 
       font-family: Arial;     
 
       text-decoration: none;  
 
       text-decoration: none;  
}     
+
  }     
</style>    
+
  /*]]>*/
<div id="Place"></div>    
+
  </style>
<script>        
+
 
var basicPlace = new nokia.places.Place({             
+
  <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.widgets.Place({             
 
                 placeId: '250u0ts2-78a011f821684d489e709ad6a3329fac',             
 
                 placeId: '250u0ts2-78a011f821684d489e709ad6a3329fac',             
 
                 targetNode: 'Place',             
 
                 targetNode: 'Place',             
 
                 template: 'nokia.blue.extended'        });         
 
                 template: 'nokia.blue.extended'        });         
  
/*          * There are 3 predefined templates you can use:           
+
  /*          * There are 3 predefined templates you can use:           
 
             * 'nokia.blue.place'           
 
             * 'nokia.blue.place'           
 
             * 'nokia.blue.extended'           
 
             * 'nokia.blue.extended'           
Line 53: Line 74:
 
             * 'nokia.general.bubble'           
 
             * 'nokia.general.bubble'           
  
*/         
+
  */         
</script>  
+
  //]]>
</body>  
+
  </script>
</html>  
+
</body>
 
+
</html>
 
</code>
 
</code>
  
==For more on Nokia Places API==  
+
== Screenshot ==
 +
The following screenshot shows the details of the place after making the search.
 +
 
 +
[[File:search-place-nma.png]]
  
Please check out the Ovi Maps API full documentation and API reference here: 
+
==For more on the Nokia Maps API==
  
http://api.maps.nokia.com/places 
+
Please check out the Nokia Maps API full documentation and API reference here:
 +
* [http://developer.here.net/javascript_api Nokia Maps API]
  
==Tested with==   
+
You may also access the interactive API explorer
 +
* [http://developer.here.net/javascript_api_explorer API explorer]
  
Google Chrome 14.0.835.202 m  
+
{{ArticleMetaData
Mozilla Firefox 8.0
+
|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]]) -->
 +
|devices= Internet Explorer, Google Chrome, Firefox, Safari
 +
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Nokia Qt SDK 1.1]) -->
 +
|platform= Web
 +
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 +
|dependencies=Nokia Maps 2.2.4
 +
|signing=<!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 +
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 +
|keywords= Nokia Maps, Places, JavaScript
 +
|id= <!-- Article Id (Knowledge base articles only) -->
 +
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 +
|translated-by= <!-- [[User:XXXX]] -->
 +
|translated-from-title= <!-- Title only -->
 +
|translated-from-id= <!-- Id of translated revision -->
 +
|review-by=<!-- After re-review: [[User:username]] -->
 +
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 +
|update-by= [[User:jasfox]]
 +
|update-timestamp= 20120206
 +
|creationdate=20110620
 +
|author=[[User:Maveric]]
 +
}}
 +
{{SeeAlso|
 +
* [http://developer.here.net/javascript_api Nokia Maps API]
 +
* [http://developer.here.net/apiexplorer/examples/api-for-js/places/basic_place.html  Basic Place Display]
 +
* [http://developer.here.net/apiexplorer/examples/api-for-js/places/basic_search_box.html  Basic Search Box]
 +
* [http://developer.here.net/apiexplorer/examples/api-for-js/places/detailed_results_category_search.html  Category Search]
 +
* [http://developer.here.net/apiexplorer/examples/api-for-js/places/map.html  Map Integrated Search] }}

Revision as of 14:39, 14 March 2013

Contents

Introduction

In this example we will use the places library of the Nokia Maps API to get information about a specific place and render that data 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

This is a full HTML & JavaScript example. Add in your own AppId and Token and feel free to modify and use for your own purposes.

<!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.4/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.widgets.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>

Screenshot

The following screenshot shows the details of the place after making the search.

Search-place-nma.png

For more on the Nokia Maps API

Please check out the Nokia Maps API full documentation and API reference here:

You may also access the interactive API explorer

Article Metadata
Tested with
Devices(s): Internet Explorer, Google Chrome, Firefox, Safari
Compatibility
Platform(s): Web
Dependencies: Nokia Maps 2.2.4
Article
Keywords: Nokia Maps, Places, JavaScript
Created: Maveric (20 Jun 2011)
Updated: jasfox (06 Feb 2012)
Last edited: jasfox (14 Mar 2013)
72 page views in the last 30 days.
×