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

Category search and detailed results

In this example, you can perform a category search, then select a place from the list of results to view the full details. The detailed information includes contact details, a map, opening hours, photographs and a list of reviews with ratings.

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-placelist .nokia-place-name{
            cursor: pointer;
        }
        
        #csPlaceList{
            margin-top: 5px;
        }
    </style>
    <table cellspacing="2">
        <tr>
            <td valign="top">
                <div id="csSearch"></div>
                <div id="csPlaceList"></div>
            </td>
            <td valign="top">
                <div id="csPlaceWidget"></div>
            </td>            
        </tr>
    </table>
    <script>
        var csPlaceWidget = new nokia.places.widgets.Place({
            targetNode: 'csPlaceWidget',
            template: 'nokia.general.place'
        });
    
        
        var csPlaceList = new nokia.places.widgets.PlaceList({
            targetNode: 'csPlaceList',
            events:[
            {
               rel:'nokia-place-name',
               name: 'click',
               handler: function (data) {
                   if (data.placeId) {
                       csPlaceWidget.setPlaceId(data.placeId);
                   }else{
                       csPlaceWidget.setData(data);
                   }
               } 
            }
            ]
        })
        
        var csSearchBox = new nokia.places.widgets.CategorySearch({
            targetNode: 'csSearch',
            searchCenter: function () {
                return {
                    latitude: 52.516274,
                    longitude: 13.377678
                }
            },
            onResults: function (data) {
                //use place list to render results
                csPlaceList.setData(data);
            }
           
        });   
    </script>
</body>
</html>

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