HERE Maps API - How to show a Place on a web page
m (Jasfox - Corrected Category) |
m (Jasfox - Updated places version. Added link.) |
||
| Line 3: | Line 3: | ||
| − | In this example we will use the Nokia Places API to get information of a specific place and to render that date 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 [http://api.maps.nokia.com/places/ Nokia Places API] to get information of a specific place and to render that date 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 23: | Line 23: | ||
==Example code== | ==Example code== | ||
| − | <code> | + | <code javascript> |
| − | <html> | + | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
| − | <head> | + | |
| − | <meta http-equiv="Content-Type" content="text/html; charset= | + | <html xmlns="http://www.w3.org/1999/xhtml"> |
| − | <script src='http://api.maps. | + | <head> |
| − | </ | + | <meta http-equiv="Content-Type" content="text/html; charset=us-ascii" /> |
| − | < | + | <title>Sharing a Place</title> |
| − | + | <script src='http://api.maps.nokia.com/places/beta3/jsPlacesAPI.js' type="text/javascript"> | |
| − | .nokia-places-general-bubble a.nokia-share | + | </script> |
| − | { color: #0099BB; | + | <style type="text/css"> |
| + | /*<![CDATA[*/ | ||
| + | |||
| + | .nokia-places-general-bubble a.nokia-share | ||
| + | { color: #0099BB; | ||
font-weight: normal; | font-weight: normal; | ||
font-size: 12px; | font-size: 12px; | ||
font-family: Arial; | font-family: Arial; | ||
text-decoration: none; | text-decoration: none; | ||
| − | } | + | } |
| − | </style> | + | /*]]>*/ |
| − | <div id="Place"></div> | + | </style> |
| − | <script> | + | |
| − | var basicPlace = new nokia.places.Place({ | + | <title></title> |
| + | </head> | ||
| + | |||
| + | <body> | ||
| + | <div id="Place"></div><script type="text/javascript"> | ||
| + | //<![CDATA[ | ||
| + | |||
| + | var basicPlace = new nokia.places.Place({ | ||
placeId: '250u0ts2-78a011f821684d489e709ad6a3329fac', | placeId: '250u0ts2-78a011f821684d489e709ad6a3329fac', | ||
targetNode: 'Place', | targetNode: 'Place', | ||
template: 'nokia.blue.extended' }); | template: 'nokia.blue.extended' }); | ||
| − | /* * There are 3 predefined templates you can use: | + | /* * There are 3 predefined templates you can use: |
* 'nokia.blue.place' | * 'nokia.blue.place' | ||
* 'nokia.blue.extended' | * 'nokia.blue.extended' | ||
| Line 53: | Line 64: | ||
* 'nokia.general.bubble' | * 'nokia.general.bubble' | ||
| − | */ | + | */ |
| − | </script> | + | //]]> |
| − | </body> | + | </script> |
| − | </html> | + | </body> |
| − | + | </html> | |
</code> | </code> | ||
==For more on Nokia Places API== | ==For more on Nokia Places API== | ||
| − | Please check out the | + | Please check out the Places API full documentation and API reference here: |
| − | http://api.maps.nokia.com/places/ | + | [http://api.maps.nokia.com/places/ http://api.maps.nokia.com/places/] |
==Tested with== | ==Tested with== | ||
| Line 70: | Line 81: | ||
Google Chrome 14.0.835.202 m | Google Chrome 14.0.835.202 m | ||
Mozilla Firefox 8.0 | Mozilla Firefox 8.0 | ||
| + | |||
| + | |||
| + | |||
| + | {{ArticleMetaData | ||
| + | |sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] --> | ||
| + | |installfile= <!-- Link to installation file (e.g. [[Media:The Installation File.sis]]) --> | ||
| + | |devices= <!-- Devices tested against - e.g. ''devices=Nokia 6131 NFC, Nokia C7-00'') --> | ||
| + | |sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Nokia Qt SDK 1.1]) --> | ||
| + | |platform= <!-- Compatible platforms - e.g. Symbian^1 and later, Qt 4.6 and later --> | ||
| + | |devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) --> | ||
| + | |dependencies=Nokia Maps 2.1.0 | ||
| + | |signing=<!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer --> | ||
| + | |capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. --> | ||
| + | |keywords= Nokia Mpas, Places, JavaScript | ||
| + | |id= <!-- Article Id (Knowledge base articles only) --> | ||
| + | |language= <!-- Language category code for non-English topics - e.g. Lang-Chinese --> | ||
| + | |translated-by= <!-- [[User:XXXX]] --> | ||
| + | |translated-from-title= <!-- Title only --> | ||
| + | |translated-from-id= <!-- Id of translated revision --> | ||
| + | |review-by=<!-- After re-review: [[User:username]] --> | ||
| + | |review-timestamp= <!-- After re-review: YYYYMMDD --> | ||
| + | |update-by= [[User:jasfoxi]] | ||
| + | |update-timestamp= 20120206 | ||
| + | |creationdate=20110620 | ||
| + | |author=[[User:Maveric]] | ||
| + | }} | ||
| + | {{SeeAlso| | ||
| + | * [http://api.maps.nokia.com/places/ Nokia Places API] }} | ||
Revision as of 17:08, 6 February 2012
Contents |
Introduction
In this example we will use the Nokia Places API to get information of a specific place and to render that date 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.
Implementation
This is a fully working example code in HTML and JavaScript.
Example code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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/places/beta3/jsPlacesAPI.js' type="text/javascript">
</script>
<style type="text/css">
/*<![CDATA[*/
.nokia-places-general-bubble a.nokia-share
{ color: #0099BB;
font-weight: normal;
font-size: 12px;
font-family: Arial;
text-decoration: none;
}
/*]]>*/
</style>
<title></title>
</head>
<body>
<div id="Place"></div><script type="text/javascript">
//<![CDATA[
var basicPlace = new nokia.places.Place({
placeId: '250u0ts2-78a011f821684d489e709ad6a3329fac',
targetNode: 'Place',
template: 'nokia.blue.extended' });
/* * There are 3 predefined templates you can use:
* 'nokia.blue.place'
* 'nokia.blue.extended'
* 'nokia.general.place'
* 'nokia.general.placesmall'
* 'nokia.general.bubble'
*/
//]]>
</script>
</body>
</html>
For more on Nokia Places API
Please check out the Places API full documentation and API reference here:
http://api.maps.nokia.com/places/
Tested with
Google Chrome 14.0.835.202 m Mozilla Firefox 8.0
Article Metadata
Dependencies: Nokia Maps 2.1.0
Article
Keywords: Nokia Mpas, Places, JavaScript
Created: Maveric
(20 Jun 2011)
Updated: User:jasfoxi
(06 Feb 2012)
Last edited: jasfox
(06 Feb 2012)
