×
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
Oskar Bukolt (Talk | contribs)
m (Oskar Bukolt - - Introduction)
Oskar Bukolt (Talk | contribs)
m (Oskar Bukolt - Update JS Lib + API Link + Note)
Line 1: Line 1:
[[Category:Nokia Maps]][[Category:JavaScript]][[Category:Code Snippet]]
+
[[Category:Nokia Maps]][[Category:JavaScript]][[Category:Code Snippet]][[Category:Nokia Maps]][[Category:Code Examples]][[Category:Nokia Maps]][[Category:Code Examples]]
[[Category:Nokia Maps]][[Category:Code Examples]]
+
[[Category:Nokia Maps]][[Category:Code Examples]]
+
 
==Introduction==     
 
==Introduction==     
  
Line 23: Line 21:
  
 
==Example code==
 
==Example code==
 
+
{{Note| The example below needs to be supplied with a valid '''AppID''' and '''token''' in order to function correctly
 +
}}
 
<code javascript>
 
<code javascript>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Line 31: 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/2.2.0/jsl.js?with=places" type="text/javascript" charset="utf-8"></script>
+
   <script src="http://api.maps.nokia.com/2.2.1/jsl.js?with=places" type="text/javascript" charset="utf-8"></script>
 
   <style type="text/css">
 
   <style type="text/css">
 
/*<![CDATA[*/
 
/*<![CDATA[*/
Line 101: Line 100:
 
|platform=  Web
 
|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.2.0
+
|dependencies=Nokia Maps 2.2.1
 
|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. -->

Revision as of 16:40, 11 July 2012

Contents

Introduction

In this example we will use the Nokia Places 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

Note.pngNote: The example below needs to be supplied with a valid AppID and token in order to function correctly

<!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.1/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 Nokia Places API

Please check out the Places API full documentation and API reference here:

Nokia Places API


Article Metadata
Tested with
Devices(s): Internet Explorer, Google Chrome, Firefox, Safari
Compatibility
Platform(s): Web
Dependencies: Nokia Maps 2.2.1
Article
Keywords: Nokia Mpas, Places, JavaScript
Created: Maveric (20 Jun 2011)
Updated: jasfox (06 Feb 2012)
Last edited: Oskar Bukolt (11 Jul 2012)
123 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.

×