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

Data API

This example allows you to try out the Data API that is part of the Nokia Places API. You can perform searches by entering a search term in an edit box and then clicking on any one of four buttons that represent different search types. To obtain place data, you can enter a place id or use the default one and then click on one of the buttons to initiate a data request. The results appear on the bottom side of the page. They are displayed as a hierarchical tree of retrieved data, where each node contains the data item name and value.

  • Run
  • Code
  • Search

    Reverse Geo Code

    Place Data

    Results

    response status:
  • <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="../../lib/jquery/jquery-1.7.min.js"></script>
        <script src="../../lib/jstree/jquery.jstree.min.js"></script>
        <script src="http://api.maps.nokia.com/places/beta3/jsPlacesAPI.js"></script>
        <style>
            .apiTest{
                float: left;
                margin-right: 25px;
                margin-bottom: 20px;
            }
            
            .apiTest label, 
            .apiTest input, .apiTest button{
                display: block;
                margin: 2px;
                padding: 2px;
            }
            
            .apiTest button{
                width: 200px;
            }
            
            .apiTest input{
                width: 193px;
            }
            
            .result{
                clear:both;
            }
            
            .result .jstree-default.jstree-focused{
                background-color: #fff;
            }
            
            .result ins{
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div class="apiTest">
            <h4>
                Search
            </h4>
            <label>
                search term:
            </label>
            <input id="searchTerm" value="pizza" type="text">
            <button onClick="searchPlacesCenter()">search using search center</button>
            <button onClick="searchPlacesCenterHtml5()">search using html5 Geo</button> 
            <button onClick="searchPlacesBoundingBox()">search using bounding box</button> 
            <button onClick="searchRestaurants()">search for restaurants</button>
            <button onClick="getCategories()">get categories</button>
        </div>
        <div class="apiTest">
            <h4>
                Reverse Geo Code
            </h4>
            <label>latitude:</label>
            <input type="text" id="revGeoLat" value="52.33812">
            <label>longitude:</label>
            <input type="text" id="revGeoLong" value="13.377678">                        
            <button onClick="reverseGeo()">Reverse Geo Code</button>
        </div>
        <div class="apiTest">
            <h4>
                Place Data
            </h4>
            <label>place id:</label>
            <input id="placeId" value="250u09wh-83d4c5479b7c4db9836602936dbc8cb8" type="text">
            <button onclick="loadPlaceData()">Load place data</button>
            <button onclick="loadPlaceReviews()">Load reviews</button>
            <button onclick="loadPlaceImages()">Load images</button>
        </div>
        <div class="clear">
        </div>
        <div class="result">
            <h4>
                Results
            </h4>
            <span>response status:</span>
            <strong id="respStatus"></strong>
            <span id="respTime"></span>
            <div id="results"></div>
        </div>
        <script>
        $(document).ready(function(){
            resultsElement = document.getElementById('results');
            statusElement = document.getElementById('respStatus');
            resptimeElement = document.getElementById('respTime');
            time = {};
        });
        
        function clearStatus(){
            statusElement.innerHTML = 'loading...';
            resptimeElement.innerHTML = '';
            time = new Date();
        }
        
        function renderJSON(obj){
            var retValue = "<ul>"
            for (var key in obj) {
                if (obj.hasOwnProperty(key)) {
                    if (typeof obj[key] == 'object') {
                        retValue += "<li class='jstree-leaf jstree-open'><a>" + key + "</a>"
                        retValue += renderJSON(obj[key])
                        retValue += "</li>"
                    } else {
                        if(key === 'placeId'){
                            retValue += "<li class='jstree-leaf'>" + key + " = <a class=\"place-id-link\" href=\"javascript:eventLoadPlaceData('" + obj[key] + "')\">" + obj[key] + "</a></li>";
                        }else{
                            retValue += "<li class='jstree-leaf'><a>" + key + " = " + nokia.places.utils.util.escapeTags(obj[key]) + "</a></li>";
                        }
                    }
                }
            }
            return retValue + "</ul>";
        }
     
        
        
        function eventLoadPlaceData(placeId){
            document.getElementById('placeId').value = placeId;
            loadPlaceData();
        }
        
        function showResultsJson(data, status){
            resptimeElement.innerHTML = '(' + ((new Date()) - time) + 'ms)';
            statusElement.innerHTML = status || '';
            resultsElement.innerHTML = renderJSON(data);
            
            $(resultsElement).jstree({
                "plugins": ["themes", "html_data"],
                "themes": {
                    "theme": "default",
                    "dots": true,
                    "icons": false
                }
            }).jstree("open_all", -1, $('#results'));
        }
        
        /**
         * specify search term and search center
         */
        function searchPlacesCenter(){
            clearStatus();
            
            var term = document.getElementById('searchTerm').value;
            var searchCenter = {
                latitude: 52.516274,
                longitude: 13.377678
            }; //Berlin
            nokia.places.search.manager.findPlaces({
                searchTerm: term,
                onComplete: function(data, status){
                    showResultsJson(data, status);
                },
                searchCenter: searchCenter,
                didYouMean: 5
            });
            
        };
        
        /**
         * html5 supported browsers (firefox ,chrome...) will prompt for geoLocation
         */
        function searchPlacesCenterHtml5(){
            clearStatus();
            
            var term = document.getElementById('searchTerm').value;
            nokia.places.search.manager.findPlaces({
                searchTerm: term,
                useGeoLocation: true,
                onComplete: function(data, status){
                    showResultsJson(data, status);
                }
            });
        }
        
        /**
         * specify bounding box instead if search center
         */
        function searchPlacesBoundingBox(){
            clearStatus();
            
            var term = document.getElementById('searchTerm').value;
            nokia.places.search.manager.findPlaces({
                searchTerm: term,
                onComplete: function(data, status){
                    showResultsJson(data, status);
                },
                boundingBox: {
                    topLeft: {
                        latitude: 52.33812,
                        longitude: 13.08835
                    },
                    bottomRight: {
                        latitude: 52.6755,
                        longitude: 13.76134
                    }
                }
            });
        }
        
        /**
         * search by category
         */
        function searchRestaurants(){
            clearStatus();
            
            var searchCenter = {
                latitude: 52.516274,
                longitude: 13.377678
            }; //Berlin
            nokia.places.search.manager.findPlacesByCategory({
                category: 'eat-drink',
                searchCenter: searchCenter,
                onComplete: function(data, status){
                    showResultsJson(data, status);
                }
            });
        }
        
         /**
          * Get Categories
          */
         function getCategories() {
             clearStatus(); 
             nokia.places.search.manager.getCategories({
                    onComplete: function (data, status) {
                    showResultsJson(data, status);
                }
            });
         }
        
        
        /**
         * Load place data
         */
        function loadPlaceData(){
            clearStatus();
            
            var placeId = document.getElementById('placeId').value;
            nokia.places.manager.getPlaceData({
                placeId: placeId,
                onComplete: function(data, status){
                    showResultsJson(data, status);
                }
            });
            
        }
        
        /**
         * Load place core data (specify basic info parameter)
         */
        function loadPlaceCoreData(){
            clearStatus();
            
            var placeId = document.getElementById('placeId').value;
            nokia.places.manager.getPlaceData({
                placeId: placeId,
                basicInfo: true,
                onComplete: function(data, status){
                    showResultsJson(data, status);
                }
            });
            
        }
        
        
        /**
         * Load place reviews
         */
        function loadPlaceReviews(){
            clearStatus();
            
            var placeId = document.getElementById('placeId').value;
            nokia.places.manager.getReviews({
                placeId: placeId,
                onComplete: function(data, status){
                    showResultsJson(data, status);
                }
            });
            
        }
        
        /**
         * Load images for place example
         */
        function loadPlaceImages(){
            clearStatus();
            
            var placeId = document.getElementById('placeId').value;
            nokia.places.manager.getMedia({
                placeId: placeId,
                onComplete: function(data, status){
                    showResultsJson(data, status);
                }
            });
            
        }
        
      
        /**
         * Post Rating
         */
        function postRating(){
            clearStatus();
            
            var placeId = document.getElementById('placeId').value;
            var ratingValue = document.getElementById('rating').value;
            nokia.places.manager.postRating({
                placeId: placeId,
                ratingValue: ratingValue,
                onComplete: function(){
                    //no status returned for jsonp post
                    showResultsJson({}, 'post completed');
                }
            });
            
        }
        
        /**
          * Reverse Geo
          */
         function reverseGeo(){
             clearStatus(); 
             
             var latitude = document.getElementById('revGeoLat').value;
             var longitude = document.getElementById('revGeoLong').value;
             nokia.places.search.manager.reverseGeoCode({
                 latitude: latitude,
                 longitude: longitude,
                 onComplete: function(data, status){
                     showResultsJson(data, status);
                 }
             });
         }   
        </script>
    </body>
    </html>
        
    

Copyright © 2011 Nokia. All rights reserved. Terms and Conditions