×
Namespaces

Variants
Actions
(Difference between revisions)

HERE Maps API - How to add map markers

From Nokia Developer Wiki
Jump to: navigation, search
jasfox (Talk | contribs)
m (Jasfox - Example code - tidy meta data.)
jasfox (Talk | contribs)
m (Jasfox - update to 2.2.4)
(25 intermediate revisions by 2 users not shown)
Line 1: Line 1:
[[Category:Nokia Maps]][[Category:JavaScript]][[Category:Code Snippet]]
+
[[Category:Nokia Maps]][[Category:JavaScript]][[Category:Code Snippet]][[Category:Nokia Maps]][[Category:Nokia Maps]][[Category:Nokia Maps]][[Category:Nokia Maps]]
 
{{ArticleMetaData
 
{{ArticleMetaData
 
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
 
|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]]) -->
 
|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'') -->
+
|devices= Google Chrome, Firefox, Internet Explorer, Safari
 
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Nokia Qt SDK 1.1]) -->
 
|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 -->
+
|platform= Web
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
 
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
+
|dependencies= Nokia Maps Api 2.2.4
 
|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= <!-- APIs, classes and methods (e.g. QSystemScreenSaver, QList, CBase -->
+
|keywords= Nokia Maps, JavaScript, Markers
 
|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 25: Line 25:
 
{{SeeAlso|
 
{{SeeAlso|
 
* [[Nokia Maps API - Add Maps To Any Web Page]]
 
* [[Nokia Maps API - Add Maps To Any Web Page]]
*   [http://api.maps.nokia.com/ Nokia Maps API] }}
+
* [http://developer.here.net/javascript_api Nokia Maps API]
 
+
* [http://developer.here.net/apiexplorer/examples/api-for-js/markers/marker.html Adding a Marker]
 +
* [[How to Obtain Your Own Nokia appID and Token|Obtaining an AppId and Token]]}}
  
 
==Introduction==
 
==Introduction==
  
In this article we will go thru on how to add one or more Markers to the map. A marker defines an Object that may display an icon on the map view.
+
In this article we will go through how to add one or more {{Icode|Markers}} to the map. A {{Icode|Marker}} defines an {{Icode|Object}} that may display an icon on the map view.
  
 
==Prerequisites==
 
==Prerequisites==
Line 38: Line 39:
 
The example assumes you have already added the Nokia Maps to your web page as explained in the previous article [[Nokia Maps API - Add Maps To Any Web Page]]
 
The example assumes you have already added the Nokia Maps to your web page as explained in the previous article [[Nokia Maps API - Add Maps To Any Web Page]]
  
==Important about Maps credentials==
+
==Important note about maps credentials==
  
With the Nokia Maps API you can start without having any credentials given, but you might face a performance gap. In order to get the full potential out of the
+
Nokia provides several services options within the Maps API offering. The service is free to use, but  you must obtain and use authentication and authorization credentials to use the services. Please read the
offering, you must get the credentials that authenticate your application against the Services. Please read through the Location API.
+
[http://developer.here.net/terms_conditions Terms and Conditions] and check the [http://developer.here.net/web/guest/plans Pricing Plans page]  to decide which business model best fits your needs. Authentication requires unique Maps API credentials, namely an AppId and a token. You can get these credentials free for free following the instructions  [http://developer.here.net/docs/maps_js/topics/credentials.html#acquiring-credentials here]
  
For more information on how to obtain the credentials, please start with the  Nokia Maps API Developers Guide section "Acquiring API credentials"
 
 
 
==Implementation==
 
==Implementation==
 +
  
 
=== Defining a Marker ===
 
=== Defining a Marker ===
First we will need to define the Marker. This will be done by specifying the location as a GeoCoordinate and then defining the marker:
+
First we will need to define the {{Icode|Marker}}. This will be done by specifying the location as a {{Icode|geo.Coordinate}} and then defining the {{Icode|Marker}}:
 
<code java>
 
<code java>
 
   var center =    new nokia.maps.geo.Coordinate(40.738728,-73.99236);
 
   var center =    new nokia.maps.geo.Coordinate(40.738728,-73.99236);
Line 54: Line 54:
 
</code>
 
</code>
  
The Marker needs geocoordinates as parameters, that is, the latitude and longitude it will be placed on the map. In our example we are using 40.738728 for the
+
The {{Icode|Marker}} needs geocoordinates as parameters, that is, its latitude and longitude on the map. In our example we are using 40.738728 for the
latitude and -73.99236 for the longitude This will place a marker in Central New York. ''marker'' now contains a new ''StandardMarker'' object.
+
latitude and -73.99236 for the longitude This will place a marker in Central New York. {{Icode|marker}} now contains a new {{Icode|StandardMarker}} object.
  
 
===Adding a Marker directly ===
 
===Adding a Marker directly ===
We may place the ''StandardMarker'' on the map by adding it directly as shown:
+
We may place the {{Icode|StandardMarker}} on the map by adding it directly as shown:
  
 
<code javascript>
 
<code javascript>
 
   map.objects.add(marker);
 
   map.objects.add(marker);
 
</code>
 
</code>
 +
 +
  
  
 
=== Adding a Marker via a Container ===
 
=== Adding a Marker via a Container ===
As an alternative to adding a marker directly,  or we can add it to  a container and the add the conatiner to the map. A container is used to group Objects, thus allows it to operate on  
+
As an alternative to adding a marker directly,  we can add it to  a {{Icode|Container}} and then add the {{Icode|Container}} to the map. A {{Icode|Container}} is used to group {{Icode|Objects}}, and thus allows them all to be operated on at once without the need to iteratively visit each one (e.g. for changing the visibility).
a whole group of objects without the need to iteratively visit each Object (e.g. for changing the visibility).
+
  
First create a container:
+
First create a {{Icode|Container}}:
 
<code javascript>
 
<code javascript>
 
   var container = new nokia.maps.map.Container();
 
   var container = new nokia.maps.map.Container();
 
</code>
 
</code>
  
Now that we have the ''Container'' ready, we can add the ''StandardMarker'' into it:
+
Now that we have the {{Icode|Container}} ready, we can add the {{Icode|StandardMarker}} into it:
  
 
<code java>
 
<code java>
Line 81: Line 82:
 
</code>
 
</code>
 
                  
 
                  
And then when the ''StandardMarker'' is in the ''Container'', we will need to add the ''Container'' to the map objects collection, to be able to show the content on it:
+
And then when the {{Icode|StandardMarker}} is in the {{Icode|Container}}, we will need to add the {{Icode|Container}} to the map objects collection, to be able to show the content on it:
  
 
<code java>
 
<code java>
Line 88: Line 89:
  
 
=== Manipulating the Marker ===
 
=== Manipulating the Marker ===
The properties of the ''StandardMarker'' can be further manipulated, e.g. you can make the ''Marker'' draggable (it is not that by default) if you wish:
+
The properties of the {{Icode|StandardMarker}} can be further manipulated, e.g. you can make the {{Icode|Marker}} {{Icode|draggable}} (it is static by default) if you wish:
  
 
<code javascript>
 
<code javascript>
Line 94: Line 95:
 
</code>
 
</code>
  
And to make the  ''StandardMarker'' static again, you would give:
+
And to make the  {{Icode|StandardMarker}} static again, you would give:
  
 
<code javascript>
 
<code javascript>
Line 100: Line 101:
 
</code>
 
</code>
  
For a ''StandardMarker'' you can set the text as shown:  
+
For a {{Icode|StandardMarker}} you can set the {{Icode|text}} property as shown:  
  
 
<code javascript>
 
<code javascript>
Line 107: Line 108:
  
 
=== Retrieving information about the marker ===
 
=== Retrieving information about the marker ===
Sometimes it may be useful to know if a ''Container'' has been added to the ''Display''. Earlier we could have initiated the ''Display'' object e.g. like this:
+
Sometimes it may be useful to know if a {{Icode|Container}} has been added to the {{Icode|Display}}. Earlier we could have initiated the {{Icode|Display}} object e.g. like this:
  
 
<code javascript>
 
<code javascript>
Line 115: Line 116:
 
</code>
 
</code>
  
Now, with the reference to “map”, we can request:
+
Now, with the reference to {{Icode|"map"}}, we can request:
  
 
<code java>
 
<code java>
Line 121: Line 122:
 
</code>
 
</code>
  
In our case test would result in “true”.
+
Our case test would result in {{Icode|true}}.
  
  
With the'' isVisible (display) : Boolean'' we will get true if the object's visibility as well as all parent's visibilities are true and if the object is
+
With the {{Icode|isVisible (display) : Boolean}} we will get true if the object's visibility as well as all parent's visibilities are true and if the object is
attached to a map (i.e. parent chain ends with a map). The returned value is only valid for the given ''nokia.maps.map.Display'' object.  
+
attached to a map (i.e. parent chain ends with a map). The returned value is only valid for the given {{Icode|nokia.maps.map.Display}} object.  
  
 
Parameters:
 
Parameters:
Line 140: Line 141:
 
Again, this would result in “true”.
 
Again, this would result in “true”.
  
With the'' getParent (display)'' we can get the parent of the map object.
+
With the {{Icode|getParent (display)}} we can get the parent of the map object.
 
   
 
   
 
Parameters:
 
Parameters:
Line 149: Line 150:
 
Returns:
 
Returns:
 
{nokia.maps.map.Object}  
 
{nokia.maps.map.Object}  
The ''parent'' object of this object for the given display or undefined if this map object has no parent.  
+
The {{Icode|parent}} object of this object for the given display or {{Icode|undefined}} if this map object has no parent.  
  
 
<code java>
 
<code java>
Line 155: Line 156:
 
</code>
 
</code>
  
If we want to get the ''Display'' names that the ''Container'' is attached to, this could be queried as follows:
+
If we want to get the {{Icode|Display}} names that the {{Icode|Container}} is attached to, this could be queried as follows:
 
<code java>
 
<code java>
 
     test = marker.getDisplays();
 
     test = marker.getDisplays();
 
</code>
 
</code>
  
This case we would know already there is the “map” Display, so requesting now the question'' marker.isAdded (test)'' would give us “true”,  
+
In this case we would know already that there is the {{Icode|"map" Display}}, so now asking the question {{Icode|marker.isAdded (test)}} would give us {{Icode|true}},  
because ''marker'' is attached to the “map”.
+
because {{Icode|marker}}  is attached to the {{Icode|"map"}}.
  
 
==Example code==
 
==Example code==
  
Here is a full example with required HTML and embedded JavaScript.
+
Here is a full example with required HTML and embedded JavaScript. Remember to add in your own [[How to Obtain Your Own Nokia appID and Token| AppId and Token]].
  
 
<code javascript>
 
<code javascript>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
 
<html xmlns="http://www.w3.org/1999/xhtml">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
+
    <head>
<meta http-equiv="content-type" content="text/html; charset=us-ascii" />
+
      <title>Adding a marker.</title>
<meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9" />
+
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Marker on the Map</title>
+
      <script type="text/javascript"
<!-- By default we add ?kml=auto&heatmap=auto to auto load KML & heatmap package remove params if package are not needed -->
+
            src="http://api.maps.nokia.com/2.2.4/jsl.js?with=all" charset="utf-8">
 +
        </script>
 +
    </head>
 +
    <body>
 +
 
 +
        <div id="mapContainer" style="z-index: -1; left:0px; top:0px; width: 100%; height: 80%; position: absolute;"></div>
 +
        <script type="text/javascript">
 +
/////////////////////////////////////////////////////////////////////////////////////
 +
// 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");
 +
 
 +
//
 +
/////////////////////////////////////////////////////////////////////////////////////
  
<script type="text/javascript" charset="UTF-8" src=
 
"http://api.maps.nokia.com/2.1.0/jsl.js?kml=auto&amp;heatmap=auto">
 
</script>
 
</head>
 
<body>
 
<div id="mapContainer" style=
 
"z-index: -1; left:0px; top:0px; width: 50%; height: 50%; position: absolute;">
 
</div>
 
<script type="text/javascript">
 
//<![CDATA[
 
                        // Don't forget to set your API credentials
 
                        // nokia.maps.util.ApplicationContext.set({"appId": "YOUR APPID", "authenticationToken": "YOUR TOKEN"});
 
 
         ///            THE LAT AND LONG HERE ARE IN CENTRAL NEW YORK
 
         ///            THE LAT AND LONG HERE ARE IN CENTRAL NEW YORK
 
         var center =    new nokia.maps.geo.Coordinate(40.738728,-73.99236);
 
         var center =    new nokia.maps.geo.Coordinate(40.738728,-73.99236);
       
 
 
// Get the DOM node to which we will append the map
 
// Get the DOM node to which we will append the map
 
var mapContainer = document.getElementById("mapContainer");
 
var mapContainer = document.getElementById("mapContainer");
 
+
 
// Create a map inside the map container DOM node
 
// Create a map inside the map container DOM node
 
var map = new nokia.maps.map.Display(mapContainer, {
 
var map = new nokia.maps.map.Display(mapContainer, {
Line 207: Line 211:
 
                 new nokia.maps.map.component.PublicTransport(),
 
                 new nokia.maps.map.component.PublicTransport(),
 
                 new nokia.maps.map.component.Overview(),
 
                 new nokia.maps.map.component.Overview(),
                 new nokia.maps.map.component.ScaleBar(),
+
                 new nokia.maps.map.component.ScaleBar()
                new nokia.maps.positioning.component.Positioning(),
+
                new nokia.maps.map.component.RightClick(),
+
                new nokia.maps.search.component.RightClick(),
+
                new nokia.maps.routing.component.RightClick()
+
 
         ]
 
         ]
 
});
 
});
 
var    marker = new nokia.maps.map.StandardMarker(center);
 
var    marker = new nokia.maps.map.StandardMarker(center);
 
map.objects.add(marker);
 
map.objects.add(marker);
//]]>
 
 
</script>
 
</script>
 
</body>
 
</body>
</html>
+
</html></code>
</code>
+
  
==For more on Nokia Maps API==
+
==For more on the Nokia Maps API==
  
 
Please check out the Nokia Maps API full documentation and API reference here:
 
Please check out the Nokia Maps API full documentation and API reference here:
* http://api.maps.nokia.com/
+
* [http://developer.here.net/javascript_api Nokia Maps API]
 
+
You may also access the interactive Nokia Maps API playground,
+
* http://api.maps.nokia.com/2.1.0/playground/index.html
+
 
+
==Tested on==
+
  
* Google Chrome 11.0x
+
You may also access the interactive API explorer
* Mozilla Firefox 4.0x, 5.0
+
* [http://developer.here.net/javascript_api_explorer API explorer]

Revision as of 14:25, 14 March 2013

Article Metadata
Tested with
Devices(s): Google Chrome, Firefox, Internet Explorer, Safari
Compatibility
Platform(s): Web
Dependencies: Nokia Maps Api 2.2.4
Article
Keywords: Nokia Maps, JavaScript, Markers
Created: Maveric (21 Jun 2011)
Updated: jasfox (06 Feb 2012)
Last edited: jasfox (14 Mar 2013)

Contents

Introduction

In this article we will go through how to add one or more Markers to the map. A Marker defines an Object that may display an icon on the map view.

Prerequisites

A supported web browser (basically any modern web browser)

The example assumes you have already added the Nokia Maps to your web page as explained in the previous article Nokia Maps API - Add Maps To Any Web Page

Important note about maps credentials

Nokia provides several services options within the Maps API offering. The service is free to use, but you must obtain and use authentication and authorization credentials to use the services. Please read the Terms and Conditions and check the Pricing Plans page to decide which business model best fits your needs. Authentication requires unique Maps API credentials, namely an AppId and a token. You can get these credentials free for free following the instructions here

Implementation

Defining a Marker

First we will need to define the Marker. This will be done by specifying the location as a geo.Coordinate and then defining the Marker:

   var center =    new nokia.maps.geo.Coordinate(40.738728,-73.99236);
var marker = new nokia.maps.map.StandardMarker(center);

The Marker needs geocoordinates as parameters, that is, its latitude and longitude on the map. In our example we are using 40.738728 for the latitude and -73.99236 for the longitude This will place a marker in Central New York. marker now contains a new StandardMarker object.

Adding a Marker directly

We may place the StandardMarker on the map by adding it directly as shown:

   map.objects.add(marker);



Adding a Marker via a Container

As an alternative to adding a marker directly, we can add it to a Container and then add the Container to the map. A Container is used to group Objects, and thus allows them all to be operated on at once without the need to iteratively visit each one (e.g. for changing the visibility).

First create a Container:

   var container = new nokia.maps.map.Container();

Now that we have the Container ready, we can add the StandardMarker into it:

    container .objects.add(marker);
//or another way of putting this e.g. container.objects.add( new nokia.maps.map.StandardMarker( new nokia.maps.geo.Coordinate(40.738728,-73.99236)));

And then when the StandardMarker is in the Container, we will need to add the Container to the map objects collection, to be able to show the content on it:

    map.objects.add(container);

Manipulating the Marker

The properties of the StandardMarker can be further manipulated, e.g. you can make the Marker draggable (it is static by default) if you wish:

    marker.set("draggable",true);

And to make the StandardMarker static again, you would give:

    marker.set("draggable",false);

For a StandardMarker you can set the text property as shown:

    marker.set("text","Your marker!")

Retrieving information about the marker

Sometimes it may be useful to know if a Container has been added to the Display. Earlier we could have initiated the Display object e.g. like this:

...
var map = nokia.maps.map.Display(document.getElementById("map"),
...

Now, with the reference to "map", we can request:

    test = marker.isAdded (map)

Our case test would result in true.


With the isVisible (display) : Boolean we will get true if the object's visibility as well as all parent's visibilities are true and if the object is attached to a map (i.e. parent chain ends with a map). The returned value is only valid for the given nokia.maps.map.Display object.

Parameters:

{nokia.maps.map.Display} display The display to check.

In our case we could ask:

    test = marker.isVisible(map);

Again, this would result in “true”.

With the getParent (display) we can get the parent of the map object.

Parameters:

{nokia.maps.map.Display} display The display for which to return the parent object.

Returns: {nokia.maps.map.Object} The parent object of this object for the given display or undefined if this map object has no parent.

    test = marker.getParent(map);

If we want to get the Display names that the Container is attached to, this could be queried as follows:

    test = marker.getDisplays();

In this case we would know already that there is the "map" Display, so now asking the question marker.isAdded (test) would give us true, because marker is attached to the "map".

Example code

Here is a full example with required HTML and embedded JavaScript. Remember to add in your own AppId and Token.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Adding a marker.</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript"
src="http://api.maps.nokia.com/2.2.4/jsl.js?with=all" charset="utf-8">
</script>
</head>
<body>
 
<div id="mapContainer" style="z-index: -1; left:0px; top:0px; width: 100%; height: 80%; position: absolute;"></div>
<script type="text/javascript">
/////////////////////////////////////////////////////////////////////////////////////
// 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");
 
//
/////////////////////////////////////////////////////////////////////////////////////
 
/// THE LAT AND LONG HERE ARE IN CENTRAL NEW YORK
var center = new nokia.maps.geo.Coordinate(40.738728,-73.99236);
// Get the DOM node to which we will append the map
var mapContainer = document.getElementById("mapContainer");
 
// Create a map inside the map container DOM node
var map = new nokia.maps.map.Display(mapContainer, {
// initial center and zoom level of the map
center: center,
zoomLevel: 15,
components: [
new nokia.maps.map.component.ZoomBar(),
new nokia.maps.map.component.Behavior(),
new nokia.maps.map.component.TypeSelector(),
new nokia.maps.map.component.Traffic(),
new nokia.maps.map.component.PublicTransport(),
new nokia.maps.map.component.Overview(),
new nokia.maps.map.component.ScaleBar()
]
});
var marker = new nokia.maps.map.StandardMarker(center);
map.objects.add(marker);
</script>
</body>
</html>

For more on the Nokia Maps API

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

You may also access the interactive API explorer

381 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×