×
Namespaces

Variants
Actions
(Difference between revisions)

HERE Maps API - How to show a Place on a web page

From Nokia Developer Wiki
Jump to: navigation, search
jasfox (Talk | contribs)
m (Jasfox - - Example code)
jasfox (Talk | contribs)
m (Jasfox -)
 
(9 intermediate revisions by 2 users not shown)
Line 1: Line 1:
[[Category:Nokia Maps]][[Category:JavaScript]][[Category:Code Snippet]][[Category:Nokia Maps]][[Category:Nokia Maps]]
+
[[Category:HERE Maps]][[Category:JavaScript]][[Category:Code Examples]]
 
==Introduction==     
 
==Introduction==     
  
  
In this example we will use the places library  of the [http://developer.here.net/javascript_api Nokia Maps API] to get information about a specific place and render that data on the web page with the use of the default template. There are a set of templates you can use for your purposes.
+
In this example we will use the places library  of the [http://developer.here.net/javascript_api HERE Maps API] to get information about a specific place and render that data on the web page with the use of the default template. There are a set of templates you can use for your purposes.
  
 
The information displayed consists of the name of the place next to a POI category icon, the address and contact details on a map centered to the POI icon.
 
The information displayed consists of the name of the place next to a POI category icon, the address and contact details on a map centered to the POI icon.
Line 21: Line 21:
  
 
==Example code==
 
==Example code==
This is a full HTML & JavaScript example.  Add in your own [[How to Obtain Your Own Nokia appID and Token| AppId and Token]] and feel free to modify and use for your own purposes.
 
  
 
<code javascript>
 
<code javascript>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
function displayPlaceData(map){
 +
var basicPlace = new nokia.places.widgets.Place({
 +
placeId: '250u0ts2-78a011f821684d489e709ad6a3329fac',
 +
targetNode: 'placeContainer',
 +
template: 'nokia.blue.extended'});
 +
}
 +
</code>
  
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
 
  <meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
 
  <title>Sharing a Place</title>
 
  <script src="http://api.maps.nokia.com/2.2.3/jsl.js?with=places" type="text/javascript" charset="utf-8"></script>
 
  <style type="text/css">
 
/*<![CDATA[*/
 
  
  .nokia-places-general-bubble a.nokia-share
+
The following screenshot shows the details of the place after making the search.  
  {    color: #0099BB;   
+
      font-weight: normal;   
+
      font-size: 12px;   
+
      font-family: Arial;   
+
      text-decoration: none;
+
  }   
+
  /*]]>*/
+
  </style>
+
  
  <title></title>
+
[[File:search-place-nma.png]]
</head>
+
  
<body>
 
  <div id="Place"></div><script type="text/javascript">
 
//<![CDATA[
 
  
/////////////////////////////////////////////////////////////////////////////////////
+
The following fully working example displays the place as shown above:
// Don't forget to set your API credentials
+
//
+
// Replace with your appId and token which you can obtain when you
+
// register on http://api.developer.nokia.com/
+
//
+
nokia.Settings.set( "appId", "YOUR APP ID GOES HERE");
+
nokia.Settings.set( "authenticationToken", "YOUR AUTHENTICATION TOKEN GOES HERE");
+
+
/////////////////////////////////////////////////////////////////////////////////////
+
       
+
  var basicPlace = new nokia.places.widgets.Place({           
+
                placeId: '250u0ts2-78a011f821684d489e709ad6a3329fac',           
+
                targetNode: 'Place',           
+
                template: 'nokia.blue.extended'        });       
+
  
  /*          * There are 3 predefined templates you can use:          
+
http://rawgithub.com/heremaps/examples/master/maps_api_for_javascript/simple-examples/display-place-data.html
            * 'nokia.blue.place'         
+
            * 'nokia.blue.extended'         
+
            * 'nokia.general.place'         
+
            * 'nokia.general.placesmall'         
+
            * 'nokia.general.bubble'         
+
 
+
  */        
+
  //]]>
+
  </script>
+
</body>
+
</html>
+
</code>
+
 
+
== Screenshot ==
+
The following screenshot shows the details of the place after making the search.
+
 
+
[[File:search-place-nma.png]]
+
  
==For more on the Nokia Maps API==
+
==For more on the HERE Maps API==
  
Please check out the Nokia Maps API full documentation and API reference here:
+
Please check out the HERE Maps API full documentation and API reference here:
* [http://developer.here.net/javascript_api Nokia Maps API]
+
* [http://developer.here.com/javascript_api HERE Maps API]
  
 
You may also access the interactive API explorer
 
You may also access the interactive API explorer
* [http://developer.here.net/javascript_api_explorer API explorer]
+
* [http://developer.here.com/javascript_api_explorer API explorer]
  
 
{{ArticleMetaData
 
{{ArticleMetaData
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
+
|sourcecode= [[https://github.com/heremaps/examples/blob/master/maps_api_for_javascript/simple-examples/display-place-data.html display-place-data.html]]
 
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 
|installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) -->
 
|devices= Internet Explorer, Google Chrome, Firefox, Safari
 
|devices= Internet Explorer, Google Chrome, Firefox, Safari
Line 101: Line 56:
 
|platform=  Web
 
|platform=  Web
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
|dependencies=Nokia Maps 2.2.3
+
|dependencies=HERE Maps 2.5.3
 
|signing=<!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 
|signing=<!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
 
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
|keywords= Nokia Maps, Places, JavaScript
+
|keywords= HERE Maps, Places, JavaScript
 
|id= <!-- Article Id (Knowledge base articles only) -->
 
|id= <!-- Article Id (Knowledge base articles only) -->
 
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
Line 118: Line 73:
 
}}
 
}}
 
{{SeeAlso|
 
{{SeeAlso|
* [http://developer.here.net/javascript_api Nokia Maps API]
+
* [http://developer.here.net/javascript_api HERE Maps API]
 
* [http://developer.here.net/apiexplorer/examples/api-for-js/places/basic_place.html  Basic Place Display]  
 
* [http://developer.here.net/apiexplorer/examples/api-for-js/places/basic_place.html  Basic Place Display]  
 
* [http://developer.here.net/apiexplorer/examples/api-for-js/places/basic_search_box.html  Basic Search Box]  
 
* [http://developer.here.net/apiexplorer/examples/api-for-js/places/basic_search_box.html  Basic Search Box]  
 
* [http://developer.here.net/apiexplorer/examples/api-for-js/places/detailed_results_category_search.html  Category Search]  
 
* [http://developer.here.net/apiexplorer/examples/api-for-js/places/detailed_results_category_search.html  Category Search]  
 
* [http://developer.here.net/apiexplorer/examples/api-for-js/places/map.html  Map Integrated Search] }}
 
* [http://developer.here.net/apiexplorer/examples/api-for-js/places/map.html  Map Integrated Search] }}

Latest revision as of 14:29, 28 November 2013

Contents

[edit] Introduction

In this example we will use the places library of the HERE Maps API to get information about a specific place and render that data on the web page with the use of the default template. There are a set of templates you can use for your purposes.

The information displayed consists of the name of the place next to a POI category icon, the address and contact details on a map centered to the POI icon.

To the results it is possible to add a list of reviews, ratings, accepted payment methods, photos taken.

The HTML page has a div element on which the information will be displayed.

In this simple example, we will only call the Place constructor using two parameters:

  • targetNode - indicates where to display the place data.
  • placeId - the id of the location for which data is to be fetched and displayed.

[edit] Implementation

This is a fully working example code in HTML and JavaScript.

[edit] Example code

function displayPlaceData(map){
var basicPlace = new nokia.places.widgets.Place({
placeId: '250u0ts2-78a011f821684d489e709ad6a3329fac',
targetNode: 'placeContainer',
template: 'nokia.blue.extended'});
}


The following screenshot shows the details of the place after making the search.

Search-place-nma.png


The following fully working example displays the place as shown above:

http://rawgithub.com/heremaps/examples/master/maps_api_for_javascript/simple-examples/display-place-data.html

[edit] For more on the HERE Maps API

Please check out the HERE Maps API full documentation and API reference here:

You may also access the interactive API explorer

Article Metadata
Code ExampleTested with
Devices(s): Internet Explorer, Google Chrome, Firefox, Safari
Compatibility
Platform(s): Web
Dependencies: HERE Maps 2.5.3
Article
Keywords: HERE Maps, Places, JavaScript
Created: Maveric (20 Jun 2011)
Updated: jasfox (06 Feb 2012)
Last edited: jasfox (28 Nov 2013)
This page was last modified on 28 November 2013, at 14:29.
249 page views in the last 30 days.
×