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 search box

This example demonstrates a very simple way of using the Nokia Places API search interface. It displays a text field, where you can type in a search term. To perform a search, click on the button labeled "Go". The results, if any, are displayed in a list below the text field.

The body of the HTML page contains an element that contains the search box and another to display the results.

The implementation obtains an Nokia Places API search box object, by calling nokia.places.widgets.SearchBox(), passing to it:

the id of the HTML element that contains the visible search box
a function that provides the location of the search center
a function to handle the results

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>
        #basicSearchBoxResults {
            height: 300px;
            width: 300px;
            overflow: auto;
            margin: 0px;
            padding: 10px;
        }
    </style>
    <div id="basicSearchBox"></div>
    <ul id="basicSearchBoxResults"></ul>
    <script>
        var basicSearchBox = new nokia.places.widgets.SearchBox({
            targetNode: 'basicSearchBox',
            searchCenter: function () {
                return {
                    latitude: 52.516274,
                    longitude: 13.377678
                }
            },
            onResults: function (data) {
               //here you have access to data
               var resultsElem = document.getElementById('basicSearchBoxResults');
               resultsElem.innerHTML = '';
               for(var i=0, l=data.results.length; i<l ;i++){
                   var result = data.results[i],
                       liElement = document.createElement('li');
                   
                   liElement.innerHTML = result.place.name;
                   resultsElem.appendChild(liElement);
               }
               
            }
        });   
    </script>
</body>
</html>

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