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

Mobile App Example

This example demonstrates how to create mobile-ready 'find places' page/app using the PlacesAPI, and some javascript code.

Run
Code

Go Back

<!doctype html>
<html>
<head>
    
    <script src="http://api.maps.nokia.com/places/beta3/jsPlacesAPI.js"></script>
    
</head>
<body>
    <div id="searchBox"></div>
    <div id="categorySearch"></div>
    <div id="placeList"></div>
    <div id="placeContainer"></div>
    <style>
        body {
            margin: 0px;
            padding: 0px;    
            background-color: #ffffff;
        }
        
        .nokia-categories a{
            cursor: pointer;
        }
        
        .nokia-place-list li{
            cursor: pointer;
        }
    </style>
    <script>
        var appHash,
            resultSet,
            selectedResult;
        
        
        var widgetsReady = {
            'SearchBox': false, 
            'Place': false,
            'List': false,
            'Category': false
        }
        
        function areWidgetsReady (){
            for(var key in widgetsReady){
                if(!widgetsReady[key]){
                    return false;
                }
            }
            
            return true;
        }
        
        
        function setHash (val, force) {
            if(force){
                appHash = '';
                window.location.hash = '';
            }
            window.location.hash = val;
        }
        
        var placeWidget = new nokia.places.widgets.Place({
            template: 'nokia.mobileHTML5.place',
            targetNode: 'placeContainer',
            onReady: function () {
                widgetsReady['Place'] = true;
                handleHash();
            }
        });
        
        
        var placeListWidget = new nokia.places.widgets.PlaceList({
            targetNode: 'placeList',
            template: 'nokia.mobileHTML5.placelist',
            perPage: 10,
            events: [ {
                rel: 'nokia-place-item',
                name: 'click',
                handler: function(jsonObject){
                    
                    selectedResult = jsonObject;
                    
                    if (jsonObject.placeId) {
                        setHash('place/' + jsonObject.placeId);
                    }else{
                        setHash('place');
                    }
                }
            }],
            onReady: function () {
                widgetsReady['List'] = true;
                handleHash();
            }
        })
        
        var searchboxWidget = new nokia.places.widgets.SearchBox({
            targetNode: 'searchBox',
            template: 'nokia.mobileHTML5.searchbox',
            suggestions: {
                showAddress: true
            },
            onResults: function (data) {
                 resultSet = data;
                 setHash('results', true);
            },
            onReady: function () {
                widgetsReady['SearchBox'] = true;
                handleHash();
            }
        });
        
        var categorySearchWidget= new nokia.places.widgets.CategorySearch({
            targetNode: 'categorySearch',
            template: 'nokia.mobileHTML5.categorysearch',
            onResults: function (data){
                resultSet = data;
                setHash('results', true);
            },
            onReady: function () {
                widgetsReady['Category'] = true;
                handleHash();
            }
        });
        
       
        
        function handleHash () {
            var currentHash = window.location.hash.substr(1) || 'search';
            if(currentHash !== appHash && areWidgetsReady()){
                appHash = currentHash || 'search';
                
                var split = appHash.split('/');
                
                switch(split[0]){
                    case 'search': 
                        placeListWidget.hide();
                        searchboxWidget.show();
                        categorySearchWidget.show();
                        placeWidget.hide();
                        break;
                        
                    case 'results': 
                        if(!resultSet){
                            setHash('search');
                            break;
                        }
                        categorySearchWidget.hide();
                        searchboxWidget.show();
                        placeListWidget.show();
                        placeWidget.hide();
                        placeListWidget.setData(resultSet);
                        break;
                        
                    case 'place':
                        categorySearchWidget.hide();
                        searchboxWidget.hide();
                        placeListWidget.hide();
                        placeWidget.show();
                        if(split[1]){
                            placeWidget.setPlaceId(split[1]);
                        }else{
                            placeWidget.setData(selectedResult);
                        }
                        break;
                    default: 
                    
                        break
                }
            }     
        }
        
        handleHash();
        window.onhashchange = handleHash;   
    </script>
</body>
</html>

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