Revision as of 14:40, 6 February 2012

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.

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 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 offering, you must get the credentials that authenticate your application against the Services. Please read through the Location API.

For more information on how to obtain the credentials, please start with the Nokia Maps API Developers Guide section "Acquiring API credentials"

Implementation

First we will need to define the Marker. This will be done by specifying the location as a GeoCoordinate 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, the latitude and longitude it will be placed 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.

We may place the StandardMarkeron the map, or we can add it to a new Container. A Container is used to group Objects, thus allowing it to operate on a whole group of objects without the need to iteratively visit each Object (i.e., for changing the visibility).

   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);

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:

    marker.set("draggable",true);

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

    marker.set("draggable",false);

For a StandardMarkeryou can set the text e.g.

    marker.set("text","Your 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)

In 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();

This case we would know already there is the “map” Display, so requesting now 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.

<!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 name="generator" content=
"HTML Tidy for Linux/x86 (vers 11 February 2007), see www.w3.org" />
<meta http-equiv="content-type" content=
"text/html; charset=us-ascii" />
<meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9" />
<title>Marker on the Map</title>
<!-- By default we add ?kml=auto&heatmap=auto to auto load KML & heatmap package remove params if package are not needed -->
 
<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
        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(),
                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);
map.objects.add(marker);
//]]>
</script>
</body>
</html>

For more on Nokia Maps API

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

• http://api.maps.nokia.com/

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
• Mozilla Firefox 4.0x, 5.0