Revision as of 17:08, 6 February 2012 by jasfox (Talk | contribs)

HERE Maps API - How to show a Place on a web page

From Nokia Developer Wiki
Jump to: navigation, search



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.


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">
<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">
<style type="text/css">
.nokia-places-general-bubble a.nokia-share
{ color: #0099BB;
font-weight: normal;
font-size: 12px;
font-family: Arial;
text-decoration: none;
<div id="Place"></div><script type="text/javascript">
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'


For more on Nokia Places API

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


Tested with

Google Chrome 14.0.835.202 m Mozilla Firefox 8.0

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