Scroll to top

Examples

Here you will find examples of Places API and the Data API usage. All of the examples include 'copy-paste' ready code you can try on your own page.

Basic place display Custom template and CSS Basic search box Mobile Template Customized suggestion list Search and detailed results Category search and detailed results Map integration Data API

Basic place display

This example demonstrates the simplest use case for the Nokia Places API: it obtains details of a place and renders it on the page using the default template.

The displayed information shows the name of the place next to a POI category icon. This is followed by the address and contact details as well as a map, where the POI icon pinpoints the location of the place. Further, the results could include also the opening hours, info on accepted payment methods, photos, a description of the place, and finally a list of reviews and ratings.

The body of the HTML page contains one element which is intended to display detailed information about the place.

The code of the example is very simple and consists of a call to the Place constructor with two parameters:

targetNode - indicates where the place data are to be displayed
placeId - the id of the location for which data are to be fetched and displayed parameter.

Select Template:

Run
Code

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="http://api.maps.nokia.com/places/beta3/jsPlacesAPI.js"></script>
</head>
<body>
    <style>
.nokia-places-general-bubble a.nokia-share{
    color: #0099BB;
    font-weight: normal;
    font-size: 11px;
    font-family: Arial;
    text-decoration: none;
}
    </style>
    <div id="basicPlaceContainer"></div>
    <script>
        var basicPlace = new nokia.places.widgets.Place({
            placeId: '250u0ts2-78a011f821684d489e709ad6a3329fac',
            targetNode: 'basicPlaceContainer',
            template: 'nokia.blue.place'
        });
        /*
         * 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>

Nokia Places API Developer's Guide
Download the Nokia Places API Developer's Guide for offline usage.