Google static map
180 views
Skip to first unread message
CrAcKeL
Feb 12, 2011, 7:06:49 AM2/12/11
to phonegap
Hi...
I am trying to load Google static map on my blackberry application on
simulator 9800,with latest Blackberry OS.
i am not able to load the Googele map on my device ,
any help on how can i use google maps api (static api ,web service
api..etc )
below is the sample code that i am using in my app;
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width;
height=device-height; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html;
charset=utf-8">
<title>Remind Me</title>
<link rel="stylesheet" href="/master.css" type="text/css"
media="screen" />
<script type="text/javascript" src="scripts/phonegap.js"></
script>
<script type="text/javascript" src="http://maps.google.com/maps/
api/js?sensor=true"></script>
<script type="text/javascript">
function loader() {
var state = document.readyState;
if (state == 'loaded' || state == 'complete') {
run();
} else {
if (navigator.userAgent.indexOf('Browzr') >
-1) {
setTimeout(run, 250);
} else {
document.addEventListener('deviceready',run,false);
}
}
}
function run() {
var win = function(position)
{
var coords = position.coords;
alert(
'Latitude: ' + position.coords.latitude + '\n' +
'Longitude: ' + position.coords.longitude +
'\n' +
'Altitude: ' + position.coords.altitude +
'\n' +
'Accuracy: ' + position.coords.accuracy +
'\n' +
'Altitude Accuracy: ' + position.coords.altitudeAccuracy +
'\n' +
'Heading: ' + position.coords.heading +
'\n' +
'Speed: ' + position.coords.speed +
'\n' +
'Timestamp: ' + new Date(position.timestamp) +
'\n
');
var url = "http://maps.google.com/maps/api/staticmap?
center="+ coords.latitude+","+coords.longitude
+"&zoom=14&size=320x480&maptype=roadmap&sensor=true"
document.getElementById('map').setAttribute('src',url);
};
var fail = function(e) {
alert('Can\'t retrieve position.\nError: ' +
e);
};
var options = {};
options.enableHighAccuracy = true;
options.timeout = 11*1000;
navigator.geolocation.getCurrentPosition(win,
fail,options);
}
</script>
</head>
<body onload="loader();">
<H4> Google app </H4>
<img id="map" "/>
</body>
</html>
I am trying to load Google static map on my blackberry application on
simulator 9800,with latest Blackberry OS.
i am not able to load the Googele map on my device ,
any help on how can i use google maps api (static api ,web service
api..etc )
below is the sample code that i am using in my app;
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/
TR/html4/strict.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width;
height=device-height; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html;
charset=utf-8">
<title>Remind Me</title>
<link rel="stylesheet" href="/master.css" type="text/css"
media="screen" />
<script type="text/javascript" src="scripts/phonegap.js"></
script>
<script type="text/javascript" src="http://maps.google.com/maps/
api/js?sensor=true"></script>
<script type="text/javascript">
function loader() {
var state = document.readyState;
if (state == 'loaded' || state == 'complete') {
run();
} else {
if (navigator.userAgent.indexOf('Browzr') >
-1) {
setTimeout(run, 250);
} else {
document.addEventListener('deviceready',run,false);
}
}
}
function run() {
var win = function(position)
{
var coords = position.coords;
alert(
'Latitude: ' + position.coords.latitude + '\n' +
'Longitude: ' + position.coords.longitude +
'\n' +
'Altitude: ' + position.coords.altitude +
'\n' +
'Accuracy: ' + position.coords.accuracy +
'\n' +
'Altitude Accuracy: ' + position.coords.altitudeAccuracy +
'\n' +
'Heading: ' + position.coords.heading +
'\n' +
'Speed: ' + position.coords.speed +
'\n' +
'Timestamp: ' + new Date(position.timestamp) +
'\n
');
var url = "http://maps.google.com/maps/api/staticmap?
center="+ coords.latitude+","+coords.longitude
+"&zoom=14&size=320x480&maptype=roadmap&sensor=true"
document.getElementById('map').setAttribute('src',url);
};
var fail = function(e) {
alert('Can\'t retrieve position.\nError: ' +
e);
};
var options = {};
options.enableHighAccuracy = true;
options.timeout = 11*1000;
navigator.geolocation.getCurrentPosition(win,
fail,options);
}
</script>
</head>
<body onload="loader();">
<H4> Google app </H4>
<img id="map" "/>
</body>
</html>
Justin Tyberg
Feb 12, 2011, 7:50:46 AM2/12/11
to phonegap
Have you added the required <access /> element in your config.xml file
for the WebWorks application?
<access subdomains="true" uri="http://maps.google.com"/>
All domains that your application accesses have to be white listed in
BlackBerry WebWorks apps.
for the WebWorks application?
<access subdomains="true" uri="http://maps.google.com"/>
All domains that your application accesses have to be white listed in
BlackBerry WebWorks apps.
CrAcKeL
Feb 15, 2011, 7:07:20 AM2/15/11
to phonegap
Hi...yeah i forgot to add the access element in config.xml file i have
added it and it worked fine
but now when i have tried to use Google Java script API to load the
map in the div tag no the page load event , Black berry simulator
(9800) gives me and JVM 104 error .NullPointerexception, that code is
properly running on my Firefox browser.
do i need to add any feature in config file to load gmap in div canvas
or what ?? this is really frustrating ..help me
i have added this line in config.xml file
=======================================
<access subdomains="true" uri="http://google.com"/>
and tried this too. <access subdomains="true" uri="http://
maps.google.com"/>
this is my code in index.html file
=========================
<!DOCTYPE HTML >
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
success callback.
var map_canvass = initialize(coords.latitude,coords.longitude);
alert("Out of initialize");
navigator.geolocation.getCurrentPosition(win, fail,options);
}
function initialize(latitude,longitude) {
alert (latitude+"==="+longitude);
//var latlng = new google.maps.LatLng(latitude,longitude);
var latlng = new google.maps.LatLng(-34.397, 150.644);
alert("inside Init after lat long Creation: -- " , latlng);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
alert("Inside Init after Settin Option");
var map_canvas = new
google.maps.Map(document.getElementById("map_canvas"),myOptions);
alert("Insied Init after Creating and assiging the map to canvas
== ",map_canvas);
working</div>
</body>
</html>
===================================
On Feb 12, 5:50 pm, Justin Tyberg <justin.tyb...@gmail.com> wrote:
> Have you added the required <access /> element in your config.xml file
> for the WebWorks application?
>
> <access subdomains="true" uri="http://maps.google.com"/>
>
> All domains that your application accesses have to be white listed in
> BlackBerry WebWorks apps.
>
> On Feb 12, 7:06 am, CrAcKeL <elementcrac...@gmail.com> wrote:
>
>
>
>
>
>
>
> > Hi...
> > I am trying to loadGooglestatic map on my blackberry application on
> > simulator 9800,with latestBlackberry OS.
> > <H4>Googleapp </H4>
added it and it worked fine
but now when i have tried to use Google Java script API to load the
map in the div tag no the page load event , Black berry simulator
(9800) gives me and JVM 104 error .NullPointerexception, that code is
properly running on my Firefox browser.
do i need to add any feature in config file to load gmap in div canvas
or what ?? this is really frustrating ..help me
i have added this line in config.xml file
=======================================
<access subdomains="true" uri="http://google.com"/>
and tried this too. <access subdomains="true" uri="http://
maps.google.com"/>
this is my code in index.html file
=========================
<!DOCTYPE HTML >
<html>
<head>
<meta name="viewport" content="width=device-width; height=device-
height; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html;
charset=utf-8">
<style type="text/css">
<head>
<meta name="viewport" content="width=device-width; height=device-
height; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html;
charset=utf-8">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<title>Remind Me</title>
<link rel="stylesheet" href="/master.css" type="text/
css" media="screen" />
<script type="text/javascript" src="scripts/phonegap.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/
api/js?sensor=false"></script>
<link rel="stylesheet" href="/master.css" type="text/
css" media="screen" />
<script type="text/javascript" src="scripts/phonegap.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/
<script type="text/javascript">
function loader() {
var state = document.readyState;
if (state == 'loaded' || state == 'complete') {
run();
} else {
alert ("Else Part ");
function loader() {
var state = document.readyState;
if (state == 'loaded' || state == 'complete') {
run();
} else {
if (navigator.userAgent.indexOf('Browzr') > -1) {
setTimeout(run, 250);
} else {
document.addEventListener('deviceready',run,false);
}
}
}
function run() {
var win = function(position)
{
// Grab coordinates object from the Position object passed into
setTimeout(run, 250);
} else {
document.addEventListener('deviceready',run,false);
}
}
}
function run() {
var win = function(position)
{
success callback.
var coords = position.coords;
alert('Latitude: ' + position.coords.latitude +
'\n' +
'Longitude: ' + position.coords.longitude +
'\n' +
'Altitude: ' + position.coords.altitude +
'\n' +
'Accuracy: ' + position.coords.accuracy +
'\n' +
'Altitude Accuracy: ' + position.coords.altitudeAccuracy +
'\n' +
'Heading: ' + position.coords.heading +
'\n' +
'Speed: ' + position.coords.speed +
'\n' +
'Timestamp: ' + new Date(position.timestamp) +
'\n'
);
alert("Here Before Initialize");
alert('Latitude: ' + position.coords.latitude +
'\n' +
'Longitude: ' + position.coords.longitude +
'\n' +
'Altitude: ' + position.coords.altitude +
'\n' +
'Accuracy: ' + position.coords.accuracy +
'\n' +
'Altitude Accuracy: ' + position.coords.altitudeAccuracy +
'\n' +
'Heading: ' + position.coords.heading +
'\n' +
'Speed: ' + position.coords.speed +
'\n' +
'Timestamp: ' + new Date(position.timestamp) +
'\n'
);
var map_canvass = initialize(coords.latitude,coords.longitude);
alert("Out of initialize");
};
var fail = function(e) {
alert('Can\'t retrieve position.\nError: ' +
e);
};
var options = {};
options.enableHighAccuracy = true;
options.timeout = 30*1000;
var fail = function(e) {
alert('Can\'t retrieve position.\nError: ' +
e);
};
var options = {};
options.enableHighAccuracy = true;
navigator.geolocation.getCurrentPosition(win, fail,options);
}
function initialize(latitude,longitude) {
alert (latitude+"==="+longitude);
//var latlng = new google.maps.LatLng(latitude,longitude);
var latlng = new google.maps.LatLng(-34.397, 150.644);
alert("inside Init after lat long Creation: -- " , latlng);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
alert("Inside Init after Settin Option");
var map_canvas = new
google.maps.Map(document.getElementById("map_canvas"),myOptions);
alert("Insied Init after Creating and assiging the map to canvas
== ",map_canvas);
}
</script>
</head>
<body onload="loader();">
<div id="map_canvas" style="width:100%; height:90%" >still not
</script>
</head>
<body onload="loader();">
working</div>
</body>
</html>
===================================
On Feb 12, 5:50 pm, Justin Tyberg <justin.tyb...@gmail.com> wrote:
> Have you added the required <access /> element in your config.xml file
> for the WebWorks application?
>
> <access subdomains="true" uri="http://maps.google.com"/>
>
> All domains that your application accesses have to be white listed in
> BlackBerry WebWorks apps.
>
> On Feb 12, 7:06 am, CrAcKeL <elementcrac...@gmail.com> wrote:
>
>
>
>
>
>
>
> > Hi...
> > simulator 9800,with latestBlackberry OS.
>
> > i am not able to load the Googele map on my device ,
> > any help on how can i usegoogle maps api(static api ,web service
> > i am not able to load the Googele map on my device ,
Icekream
Mar 20, 2011, 7:06:02 PM3/20/11
to phon...@googlegroups.com
You ever figured this out? I tried the same thing by loading an Image() first then changing the src of an <img> it worked sporadically.
Reply all
Reply to author
Forward
0 new messages