Scroll to top

Getting started with Places API

This article demonstrates the easiest way to begin using the Places API and display places data on a Web page, even without having knowledge in programming.

A Place on your website

In the simplest scenario, to get and display data relating to a place (location) via the Places API, you need to create an instance of the class nokia.places.Place and tell it which place you are interested in and where to render (display) the data. There are three steps to follow:

1
Include the Places API JavaScript library file inside the <head> element of your Web Site
```
<script 
src="http://api.maps.nokia.com/places/beta3/jsPlacesAPI.js"></script>
```
2
Inside the page <body>, add a <div> element and set its id attribute, for example, to place - this is the element, where the place data are to be rendered
```
<div id="place"></div>
```
3
Include the following script into your web page.
```
<script type="text/javascript">
    var place = new nokia.places.widgets.Place({
    //this is the placeId for Hotel Adlon Kempinski in Berlin
    placeId: '276u33db-751a77335fcf4e0e80660190aa92f584',
    targetNode: 'place'
    });
</script>
```
You can obtain placeId by using the search, data api or generate the widget code using code generator below. For more information on possible advance usage and customisation, follow to UI API description.

Widget code generator

Move the map, search for places in different locations and generate the widget code. Copy paste generated code to your webpage.

Run
Code

The Data API

If you would like to use just data, preform searches and fetch the place information, then you need to use the Data API instead of the full UI api which is built on top of it. There are few steps to follow:

1
Include the Data Places API JavaScript library file inside the <head> element of your Web Site
```
<script 
src="http://api.maps.nokia.com/places/beta3/jsPlacesDataAPI.js"></script>
```
After including it you will get access just to the data functionality. Keep in mind that full api script (like in examples above) also includes the Data API functionality

Perform simple search by including following script to your page:

<script type="text/javascript">
    nokia.places.search.manager.findPlaces({
    searchTerm: 'pizza',
    onComplete: function(resultView, status){
        //handle your results here
    },
    searchCenter: { 
        latitude: 52.516274,  //narrow the search using location
        longitude: 13.377678  //(not mandatory)
    }
    });
</script>

The search response should look like:

{
viewId:"mbc04bl15:20110916105749943:0007422",
label:"results",
results:[
{
distance:"1359",
place:{
    location:{
        address:{
            city:"Berlin",
            countryCode:"DEU",
            country:"Germany",
            house:"1",
            street:"Anhalter Str.",
            postalCode:"10963"
        },
        position:{
                longitude:13.3826103,
                latitude:52.5044212
        }
    },
    suppliers:["telegate"],
    contacts:[
        {
            type:"phone",
            value:"+493025464770"
        },
        {
            type:"website",
            value:"http://www.marinelli-berlin.de"
        }
    ],
    placeId:"276u33d8-e2482cc709e64ec68b55e3c233405f0a",
    ratings:{"average":"5.0"},
    name:"Ristorante Marinelli"
}
}, 
{
distance: "1410",
place: ....

Perform simple place data fetch by including following script to your page:

<script type="text/javascript">
    nokia.places.manager.getPlaceData({
    //get placeId from the search results (like above)
    placeId: '276u33d8-e2482cc709e64ec68b55e3c233405f0a', 
    onComplete: function(data, status){
        //handle the data here
    }
    });
</script>

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

Getting started with Places API

Contents

A Place on your website

Widget code generator

Choose a size of your widget

The Data API