×
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 - typo.)
jasfox (Talk | contribs)
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='http://api.maps.nokia.com/places/beta3/jsPlacesAPI.js' type="text/javascript">
+
   <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/]
 
==Tested with==   
 
 
Google Chrome 14.0.835.202 m 
 
Mozilla Firefox 8.0
 
 
  
  
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 tested against - e.g. ''devices=Nokia 6131 NFC, Nokia C7-00'') -->
+
|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= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later -->
+
|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.1.0
+
|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/


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