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

Custom template and CSS

In this example, a custom template and a custom style sheet are used to display place data.

To determine how to display the place data, a template is defined, or more precisely, the template body. It consists of element where fill atribute is specified to fill the proper element using correct data and one element where Map module is specifield by the module attribute.

When the Place widget constructor is called, it receives the following parameters:

targetNode - the id or dom element reference of the top-level element in which to display the retrieved place data
placeId - the default place id; initially the Player fetches data based on this id, but a user selection sets a new id and a new data fetch
template - the id or dom node reference which contain template in addition html string template can be passed as argument

Run
Code

Where is it?

<!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 id="sourceStyle">
        .custom-place {
            position: relative;
            margin:5px;
        }
        
        .custom-place p{
            margin: 0px;
            padding: 0px;
            color: #666666;
            font-size: 12px;
        }
        
        .custom-name-container{
            position: absolute;
            top:0px;
        }
        
        .custom-name{
            color: #000;
            font-size: 13px;
            font-weight: bold;
        }
        
        .custom-category-icon{
            float: right;
        }
        
        .custom-address-container{
            position: absolute;
            bottom: 0px;
        }
        
        .custom-address p{
            font-weight: bold;
            display: inline;
            padding-right: 10px;
        }
        
        .custom-address span, .custom-address a{
            color: #666;
            font-size: 11px;
        }
        
        .custom-address a:hover {
            text-decoration: none;
        }
        
        .phone, .website-url{
            background: url('img/icons.gif') no-repeat -3px -48px;
            padding-left: 20px;
        }
        
        .website-url {
            background-position: -5px -68px;
        }
         
        .trbbox {
            background-color: #FFFFFF;
            opacity: 0.90;
            -moz-box-shadow: 0 0 3px #000000;
            height: 43px;
            position: absolute;
            width: 390px;
            padding:5px; 
            z-index: 100;
            font-family: Arial,Helvetica,sans-serif;
            margin: 0;
        }
        
        .map-size {
            height: 300px;
            width: 400px;
        }
    </style>
    <div id="customPlaceContainer" class="custom-place">
        <div module="Map" style="position:relative">
            <div rel="map-container" class="map-size"></div>
        </div>
        <div class="trbbox custom-name-container">
            <img url="{categories[0].iconURL}" class="custom-category-icon">
            <p fill="{name}" class="custom-name" rel="name-click"></p>
            <p fill="{categories[0].name}" class="custom-category"></p>
        </div>
        <div class="trbbox custom-address-container custom-address">
            <p>Where is it?</p>
            <span fill="{fullAddress()}"></span><br>
        </div>
    </div>
    <script>
        var customPlace = new nokia.places.widgets.Place({
            placeId: '250u0ts2-78a011f821684d489e709ad6a3329fac',
            targetNode: 'customPlaceContainer',
            template: 'customPlaceContainer'
        });   
    </script>
</body>
</html>

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