BlackBerry WebWorks and Google Maps v3

ChrisLad · ‎06-03-2011

Hi,

I cannot get google maps to display even in the emulator although it works fine when looking at this page in a browser. OS 6

See my code below:

<!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">

        $(document).ready(function () {

            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>
    <div id="map-canvas" style="height: 300px; width: 300px;">
        <!-- map loads here... -->
    </div>
</body>
</html>

and I have added the access elements to the config file:

<?xml version="1.0" encoding="utf-8"?>
<widget xmlns=" http://www.w3.org/ns/widgets"
        xmlns:rim="http://www.blackberry.com/ns/widgets"
        version="2.0"
        rim:header="RIM-Widget: rim/widget">

	<rim:navigation mode="focus" />

	<name>MapTest</name>
	<content src="Index.htm"/>
	<feature id="blackberry.ui.dialog" required="true" version="1.0.0"/>

	<access subdomains="true" uri="http://gstatic.com"/>
	<access subdomains="true" uri="http://google.com"/>
	<access subdomains="true" uri="http://googleapis.com"/>
	
</widget>

If anyone can help I would really appreciate it. Thanks

tneil · ‎10-16-2008

It looks like you haven't added http://maps.google.com to your <access> list. Give that a try or whitelist * to see if it is a whitelisting issue.

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter

ChrisLad · ‎06-03-2011

Hi,

I have tried adding it to the config but still no joy.

Any other ideas?

ChrisLad · ‎06-03-2011

<?xml version="1.0" encoding="utf-8"?>
<widget xmlns=" http://www.w3.org/ns/widgets"
        xmlns:rim="http://www.blackberry.com/ns/widgets"
        version="2.0"
        rim:header="RIM-Widget: rim/widget">

	<rim:navigation mode="focus" />

	<name>MapTest</name>
	<content src="Index.htm"/>
	<feature id="blackberry.ui.dialog" required="true" version="1.0.0"/>

	<access subdomains="true" uri="*"/>
	<!--<access subdomains="true" uri="http://gstatic.com"/>
	<access subdomains="true" uri="http://google.com"/>
	<access subdomains="true" uri="http://googleapis.com"/>-->
	
</widget>

I have changed my config to the above but still no map

tneil · ‎10-16-2008

Which version of the WebWorks SDK are you using? Prior to v2.0 there were issues with using files with hyphens.. I see that you are using a jQuery file with a hyphen

V2.0 of the SDK shouldn't have this problem.

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter

ChrisLad · ‎06-03-2011

It is v2 of the sdk.

Thanks for helping I really want to get to the bottom of this.

I still cant find the answer

ChrisLad · ‎06-03-2011

This is crazy! So frustrating! It should be easy!

tneil · ‎10-16-2008

When you mention that it works in a browser, are you referring to that it works in the BB6 browser? Or a desktop browser?

Tim Neil
Director, Application Platform & Tools Product Management
Follow me on Twitter

ChrisLad · ‎06-03-2011

I have tried renaming the jquery js file too but no difference.

The code is now as follows:

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

        $(document).ready(function () {

            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>
    <div id="map-canvas" style="height: 300px; width: 300px;">
        <!-- map loads here... -->
    </div>
</body>
</html>

<?xml version="1.0" encoding="utf-8"?>
<widget xmlns=" http://www.w3.org/ns/widgets"
        xmlns:rim="http://www.blackberry.com/ns/widgets"
        version="2.0"
        rim:header="RIM-Widget: rim/widget">

	<rim:navigation mode="focus" />

	<name>MapTest</name>
	<content src="Index.htm"/>
	<feature id="blackberry.ui.dialog" required="true" version="1.0.0"/>

	<access subdomains="true" uri="*"/>
	<!--<access subdomains="true" uri="http://gstatic.com"/>
	<access subdomains="true" uri="http://google.com"/>
	<access subdomains="true" uri="http://googleapis.com"/>-->
	
</widget>

Can anyone help before I pull out the last of my hair???

ChrisLad · ‎06-03-2011

It works in desktop browsers firefox, chrome and chrome with Ripple blackberry webworks emulator (not the sdk emulator).

Welcome!

Web and WebWorks Development

BlackBerry WebWorks and Google Maps v3

Re: BlackBerry WebWorks and Google Maps v3

Re: BlackBerry WebWorks and Google Maps v3

Re: BlackBerry WebWorks and Google Maps v3

Re: BlackBerry WebWorks and Google Maps v3

Re: BlackBerry WebWorks and Google Maps v3

Re: BlackBerry WebWorks and Google Maps v3

Re: BlackBerry WebWorks and Google Maps v3

Re: BlackBerry WebWorks and Google Maps v3

Re: BlackBerry WebWorks and Google Maps v3