Here/Nokia Map markers not always shown

Question

It looks like a bug to me too, and only occurs when markers cluster around the 180th line of longitude. Seems that the zoomTo() calculation is incorrect in this case, only taking in to account the last marker since it is on the "wrong" side of the international date line.

Anyway, getWidth() on the viewport does seem to work, so you could hack in your own zoomTo() function as shown in the kludge below.

Also note the use of kml=auto&map=js-p2d-dom when loading the library - this uses the DOM implementation rather than the canvas implementation this properly shows markers on both sides of the 180th line of longitude.

<!DOCTYPE HTML SYSTEM>
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9" />

        <style type="text/css">

            html {
                overflow:hidden;
            }

            body {
                margin: 0;
                padding: 0;
                overflow: hidden;
                width: 100%;
                height: 100%;
                position: absolute;
            }

            #mapContainer {
                width:100%;
                height: 100%;
                left: 0;
                top: 0;
                position: absolute;
            }

 </style>
   <script type="text/javascript" charset="UTF-8" src="http://api.maps.nokia.com/2.2.3/jsl.js?kml=auto&map=js-p2d-dom"></script>
    </head>
    <body>
        <div id="mapContainer"></div>

    <script type="text/javascript">
 /*    Set authentication token and appid
*    WARNING: this is a demo-only key
*    please register on http://api.developer.nokia.com/
*    and obtain your own developer's API key
*/
nokia.Settings.set("appId", "APP_ID");
nokia.Settings.set("authenticationToken", "TOKEN");


// 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: [52.51, 13.4],
    zoomLevel: 13,
    components: [
        // We add the behavior component to allow panning / zooming of the map
        new nokia.maps.map.component.Behavior()
    ]
});


// We create an instance of Container to store markers per city
var myContainer = new nokia.maps.map.Container();

/* We add all of the city containers to map's object collection so that
 * when we add markers to them they will be rendered onto the map
 */
map.objects.add(myContainer);

// We create several of marker for a variety of famous landmarks
var firstMarker = new nokia.maps.map.StandardMarker(
        [-18, 178.333],
        { text: 1 }
    ),
    secondMarker = new nokia.maps.map.StandardMarker(
        [-18.5, 180],
        { text: 2 }
    ),
    thirdMarker = new nokia.maps.map.StandardMarker(
        [-18.5, -178.333],
        { text: 3 }
    );

// Add the newly created landmakers per city to its container
myContainer.objects.addAll([firstMarker, secondMarker, thirdMarker]);

/* Now we calculate the bounding boxes for every container.
 * A bounding box represents a rectangular area in the geographic coordinate system.
 */
var myBoundingBox = myContainer.getBoundingBox();


zoom = 1;
map.setCenter(myBoundingBox.getCenter());
map.setZoomLevel(zoom);


while (map.getViewBounds().getWidth() >  myBoundingBox.getWidth())   {
    zoom++;
    map.setZoomLevel(zoom); 
}
zoom--
map.setZoomLevel(zoom--);

</script>

    </body>
</html>