×
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
jasfox (Talk | contribs)
m (Jasfox - Corrected Category)
jasfox (Talk | contribs)
m (Jasfox - Updated places version. Added link.)
Line 3: Line 3:
  
  
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 [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.
  
 
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 23: Line 23:
 
==Example code==
 
==Example code==
  
<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/places/beta3/jsPlacesAPI.js' type="text/javascript">
.nokia-places-general-bubble a.nokia-share
+
</script>
{    color: #0099BB;     
+
  <style type="text/css">
 +
/*<![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[
 +
       
 +
  var basicPlace = new nokia.places.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 64:
 
             * 'nokia.general.bubble'           
 
             * 'nokia.general.bubble'           
  
*/         
+
  */         
</script>  
+
  //]]>
</body>  
+
  </script>
</html>  
+
</body>
 
+
</html>
 
</code>
 
</code>
  
 
==For more on Nokia Places API==     
 
==For more on Nokia Places API==     
  
Please check out the Ovi Maps API full documentation and API reference here:   
+
Please check out the Places API full documentation and API reference here:   
  
http://api.maps.nokia.com/places/
+
[http://api.maps.nokia.com/places/ http://api.maps.nokia.com/places/]
  
 
==Tested with==     
 
==Tested with==     
Line 70: Line 81:
 
Google Chrome 14.0.835.202 m   
 
Google Chrome 14.0.835.202 m   
 
Mozilla Firefox 8.0
 
Mozilla Firefox 8.0
 +
 +
 +
 +
{{ArticleMetaData
 +
|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= <!-- Devices tested against - e.g. ''devices=Nokia 6131 NFC, Nokia C7-00'') -->
 +
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Nokia Qt SDK 1.1]) -->
 +
|platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
 +
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 +
|dependencies=Nokia Maps 2.1.0
 +
|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 Mpas, 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:jasfoxi]]
 +
|update-timestamp= 20120206
 +
|creationdate=20110620
 +
|author=[[User:Maveric]]
 +
}}
 +
{{SeeAlso|
 +
*  [http://api.maps.nokia.com/places/ Nokia Places API]  }}

Revision as of 17:08, 6 February 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/places/beta3/jsPlacesAPI.js' type="text/javascript">
</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[
 
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/

Tested with

Google Chrome 14.0.835.202 m Mozilla Firefox 8.0


Article Metadata
Dependencies: Nokia Maps 2.1.0
Article
Keywords: Nokia Mpas, Places, JavaScript
Created: Maveric (20 Jun 2011)
Updated: User:jasfoxi (06 Feb 2012)
Last edited: jasfox (06 Feb 2012)
See Also
71 page views in the last 30 days.
×