Revision as of 16:46, 27 October 2011 by Maveric (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

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

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src='http://api.maps.ovi.com/places/beta1/jsPlacesAPI.js'></script>
.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>
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 Ovi Maps API full documentation and API reference here:


Tested with

Google Chrome 14.0.835.202 m Mozilla Firefox 8.0

230 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.