×
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 - - Example code)
(12 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.3/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.3
 +
|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:13, 4 January 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.3/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.3
Article
Keywords: Nokia Maps, Places, JavaScript
Created: Maveric (20 Jun 2011)
Updated: jasfox (06 Feb 2012)
Last edited: jasfox (04 Jan 2013)
231 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×