Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Trusted Contributor
sabanim
Posts: 103
Registered: ‎03-31-2011
My Device: Curve 9330

Display users location on a Map

How do I display a dynamic map from a webworks app.

 

I can get a static map to show but I need it to scroll.

 

This works in firefox the right way but not on my curve os6:

 

<!DOCTYPE html>
<html>
<head>
    <title>MapTest</title>
    <script src="jquery-1.6.1.min.js" type="text/javascript"></script>
    <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
    <script type="text/javascript">

       function init() {

            if (navigator.geolocation) {

                var lat = 0,
		        lng = 0;

                var myOptions = {
                    zoom: 10,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

                function setCurrentLocation() {

                    var latlng = new google.maps.LatLng(lat, lng);
                    map.setCenter(latlng);

                    // Add a marker using the user_lat_long position
                    var marker = new google.maps.Marker({
                        position: latlng,
                        animation: google.maps.Animation.DROP,
                        map: map
                    });

                }

                function gpsSuccess(pos) {
                    if (pos.coords) {
                        lat = pos.coords.latitude;
                        lng = pos.coords.longitude;
                        setCurrentLocation();
                    }
                    else {
                        lat = pos.latitude;
                        lng = pos.longitude;
                    }
                }

                function gpsFail() {
                    //Geo-location is supported, but we failed to get your coordinates. Workaround here perhaps?
                }

                navigator.geolocation.getCurrentPosition(gpsSuccess, gpsFail, { enableHighAccuracy: true, maximumAge: 300000 });
            }
        }

    </script>
</head>
<body onLoad="init();">
    <div id="map-canvas" style="height: 300px; width: 300px;">
        <!-- map loads here... -->
    </div>
</body>
</html>