×
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
227 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.

×