Hi again.
First thing i'd suggest is to simply get your device location to display on a map - once that's working progress to adding the GroundOverlay.
Here's a couple of useful links you might want to bookmark, first the official documentation page for the Google Maps API:
Google Maps Javascript API V3 Reference - Google Maps JavaScript API V3 - Google Code
And secondly the Google Maps API Group:
https://groups.google.com/group/google-maps-js-api-v3
Now to check out the documentation for the google.maps.LatLng class:
Google Maps Javascript API V3 Reference - Google Maps JavaScript API V3 - Google Code
See how a LatLng constructor requires coordinates in decimal degrees?
So you need to update the HTML that you're passing to the WebView, here's an updated version of the HTML that should simply load the ROADMAP type at zoom level 13 centered on your device location:
<html>
<head>
<meta name='viewport' content='initial-scale=1.0, user-scalable=no' />
<meta http-equiv='content-type' content='text/html; charset=UTF-8'/>
<link href='http://code.google.com/apis/maps/documentation/javascript/examples/default.css' rel='stylesheet' type='text/css' />
<script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false'></script>
<script type='text/javascript'>
function initialize() {
var myLocation = new google.maps.LatLng("&Location1.Latitude&", "&Location1.Longitude&");
var myOptions = {
zoom: 13,
center: myLocation,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var Map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
}
</script>
</head>
<body onload='initialize()'>
<div id='map_canvas'></div>
</body>
</html>
Removing the formatting so the HTML is a single line string would give you:
webview1.LoadHtml("<html><head><meta name='viewport' content='initial-scale=1.0, user-scalable=no' /><meta http-equiv='content-type' content='text/html; charset=UTF-8'/><link href='http://code.google.com/apis/maps/documentation/javascript/examples/default.css' rel='stylesheet' type='text/css' /><script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=false'></script><script type='text/javascript'>function initialize() {var myLocation = new google.maps.LatLng("&Location1.Latitude&", "&Location1.Longitude&");var myOptions = {zoom: 13,center: myLocation,mapTypeId: google.maps.MapTypeId.ROADMAP};var Map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);}</script></head><body onload='initialize()'><div id='map_canvas'></div></body></html>")
When you display a Google Map in a WebView you should be able to double tap your device screen to center and zoom in on it BUT you'll not get any pinch to zoom unfortunately.
So let's say your Sub GPS_LocationChanged is now working - you'll notice that it's very inefficient.
It'll reload the entire page everytime your GPS fires a LocationChanged event.
It'll look awful and waste lots of CPU time, battery power and network bandwidth!
You could re-structure it all:
1) Create a simple web page that displays the map.
Add the web page to your project files.
Load the WebPage in Sub Activity_Create using the WebView LoadUrl method:
webview1.LoadUrl("file:///android_asset/web_page_name_here.html")
2) When Sub GPS_LocationChanged is called you want to pass the new user location to the map.
How to pass B4A data to the javascript in your web page?
My JSInterface library will work perfectly:
http://www.b4x.com/forum/additional-libraries-official-updates/9893-jsinterface.html
3) Now you need a function in your web page javascript that can be called by B4A using my JSInterface, the function needs to accept the new user location and center the map on that location.
4) Get that working and you can look at plotting the user location using a
google.maps.Marker and then progress to using a
custom icon for your marker.
5) Finally you can look at adding your GroundOverlay and removing the built in map tiles (ROADMAP, TERRAIN etc).
Removing all the built in map types is possible once you create your own custom base map type.
I've done the basic code for you and attached it to this post.
Steps 1, 2, 3 and 5 working.
Don't forget you'll need my JSInterface library in your Additional Libraries folder.
My groundOverlayBounds are approx bounds of the UK and don't reflect the true bounds covered by the image i've used for the GroundOverlay.
Replace the URL to the image used for the GroundOverlay with the URL to your image and be as exact as possible when defining the bounds covered by your image and it should all work as you want.
If you add your image to the project files then you should be able to use a URL such as file:///android_asset/my_overlay_image.jpg in the javascript.
Have a play with my code and post again if you need more help.
Martin.
