Why does my code only show a White Screen in the Nokia Here HTML5 version?

I have followed the following example from Nokia Here HTML5. It's not working as expected. This is my current code:

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <!-- You should also add the following meta tags to support Blackberry 7.0+ devices -->
        <meta name="HandheldFriendly" content="True">
        <meta name="touch-event-mode" value="native">
        <meta name="cursor-event-mode" value="native">
        <!-- To disable address sniffing and prevent native maps from starting, use the following meta tags -->
        <meta name="format-detection" content="telephone=no"/>
        <meta name="format-detection" content="address=no"/>
<!--        <link rel="stylesheet" href="http://api.maps.nokia.com/mobile/1.0.2/lib/mh5.js">-->
        <link rel="stylesheet" href="http://api.maps.nokia.com/mobile/latest/lib/colors.css">
<!--        <script src="http://api.maps.nokia.com/mobile/1.0.2/lib/mh5.js"></script>-->
        <script src="http://api.maps.nokia.com/mobile/latest/lib/mh5.js"></script>
    </head>
    <body class="mh5_hwacc_body">
        <div id="app_location" style="width:320px; height:480px; position:relative;"></div>
        <script>
            nokia.mh5.assetsPath = "http://api.maps.nokia.com/mobile/1.0.2/lib/";
            nokia.mh5.app.embed({
                domNode: "#app_location",
                appId: "_peU-uCkp-j8ovkzFGNU",
                appCode: "gBoUkAMoxoqIWfxWA5DuMQ"
            });
        </script>
    </body>
</html>

I don't know why only shows a white screen. Do you have any idea?

Optionally, I have another question. Does anyone know if this mobile version allows adding markers and clustering?

Solution

You need to make sure that the <script> initializing the mh5 container is called after the <body class="mh5_hwacc_body"> has been initialized. It would also help to include the doctype element as well. If you run your example in Chrome and check the error statements you can see that is attempting to append items into the body of the DOM when it is still null. The quick start example (appended below) works fine.

You'll need to substitute in your own app id and token

<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0,
    maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" 
    href="http://api.maps.nokia.com/mobile/1.0.2/lib/mh5.css">
<link rel="stylesheet" 
    href="http://api.maps.nokia.com/mobile/1.0.2/lib/colors.css">
</head>
<body class="mh5_hwacc_body">
<script src="http://api.maps.nokia.com/mobile/1.0.2/lib/mh5.js">
    </script>

<div id="app_location"
    style="width: 320px; height: 480px; position: relative;">
</div>

<script>
    nokia.mh5.assetsPath = 
        "http://api.maps.nokia.com/mobile/1.0.2/lib/";

    nokia.mh5.app.embed ({
        domNode: "#app_location",
        appId: "YOUR APP ID",
        appCode: "YOUR TOKEN"
    });
</script>
</body>
</html>

Use the addPOI() method described here to add markers to the map.

Clustering is not a standard feature of MH5 - it is a framework, not an API - works best within its own use case - i.e. rapid cross-platform mobile development for "search for X, route for X, add markers for X" and drill down to give an infobubble or new page. Where X is supplied by your data.