map

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=7; IE=EmulateIE9; IE=10" />

        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        <title>Test Data</title>
        <meta name="description" content="How to create a basic map"/>
        <meta name="keywords" content="basic,Getting started"/>

        <meta name=viewport content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>


        <script charset="UTF-8" src="http://js.cit.api.here.com/se/2.5.3/jsl.js?with=all"></script>

        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

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

            #uID
            {
                z-index: 10;
                position: relative;
            }

        </style>
    </head>
    <body>
    <input type="text" id="uID" PlaceHolder="Ingrese el ID"></input>
        <div id="mapContainer"></div>
        <div id="uiContainer"></div>
        <script type="text/javascript" id="exampleJsSource">
            $(function()
                {
                var  testTextBox = $('#uID');
                var code =null;
                testTextBox.keypress(function(e)
                {
                    code= (e.keyCode ? e.keyCode : e.which);
                    if (code == 13)
                        createMarkers(testTextBox.val());

                    e.preventDefault();
                });


        /*  Setup authentication app_id and app_code
            *   WARNING: this is a demo-only key
            *   please register for an Evaluation, Base or Commercial key for use in your app.
            *   Just visit http://developer.here.com/get-started for more details. Thank you!
            */
            nokia.Settings.set("app_id", "DemoAppId01082013GAL");
            nokia.Settings.set("app_code", "AJKnXv84fjrb0KIHawS0Tg");
            // Use staging environment (remove the line for production environment)
            nokia.Settings.set("serviceMode", "cit");

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

            /* Create a marker on a specified geo coordinate
             * (in this example we use the map's center as our coordinate)
             */
            var standardMarker = new nokia.maps.map.StandardMarker(map.center);
            // Next we need to add it to the map's object collection so it will be rendered onto the map.
            map.objects.add(standardMarker);

            var locations;
            function createMarkers(value)
            {
                $.ajax({
                    url: "http://thewetzone.pixub.com/web_services/getLocation.php?uid="+value,
                    type: "GET",
                    dataType: "json",
                    success: function(source){
                        locations = source;
                        showInfo();
                    },
                    error: function(dato){
                        alert("ERROR");
                    }
                });
            }

            function showInfo()
            {
            var markers = [];


            /* Attach an event listener to the newly created marker
             * to show info bubble on click of the marker
             */
             for (var idx = 0; idx < locations.length; idx++) {
                loc = locations[idx];

                alert(loc.latitude);
                alert(loc.longitude);

                /* Create a marker on a specified geo coordinate*/
                var marker = new nokia.maps.map.StandardMarker([loc.latitute, loc.longitude]);

                // add the standard marker to the map's object collection so it will be rendered onto the map
                markers.push(marker);

             }


            map.objects.addAll(markers);
                }
            });

        </script>
    </body>
</html>