Android Tutorial Googlemaps V3 In A Webview

Hi Everyone,

Until the mapview becomes available, I have managed to "squeeze" the googlemaps V3 JS API into a webview for an app I am working on :sign0060:

The benefit of the JS map over a static map is complete scrolling etc.

To give back to the community here is the code. All the code does is generate the HTML & javscript code to generate the maps !

I will create a mod if anyone is interested.

You will need an activity with a webview. I have set my webview in code to 100%x, 100%y


B4X:
Dim MapWebView as Webview
Dim Lat as Float
Dim Long as Float
Dim HtmlCode as String

Lat = -34.397     'Replace these with your app data
Long = 150.644

activity.addnew(MapWebView,0,0,100%x,100%y)

HtmlCode = "<!DOCTYPE html><html><head><meta name='viewport' content='initial-scale=1.0, user-scalable=no' /><style type='text/css'>  html { height: 100% }  body { height: 100%; margin: 0px; padding: 0px }#map_canvas { height: 100% }</style><script type='text/javascript'    src='http://maps.google.com/maps/api/js?sensor=true'></script><script type='text/javascript'>  function initialize() {    var latlng = new google.maps.LatLng(" & Lat & "," & Long & ");    var myOptions = {      zoom: 16,      center: latlng,      mapTypeId: google.maps.MapTypeId.ROADMAP    };   var map = new google.maps.Map(document.getElementById('map_canvas'),  myOptions); var marker0 = new google.maps.Marker({   position: new google.maps.LatLng(" & Lat & "," & Long & "),map: map,title: '',clickable: false,icon: '' });   }</script></head><body onload='initialize()'>  <div id='map_canvas' style='width:100%; height:100%'></div></body></html>"

webview1.LoadHtml(HTML_Code)

Neil
 

klaus

Expert
Licensed User
Longtime User
Hi Neil,

Thank's for sharing your code.
Unfortunately it doesn't work as it is :(.
B4X:
Dim MapWebView as Webview
Dim Lat as Float
Dim Long as Float
Dim HtmlCode as String
Lat = -34.397     'Replace these with your app data
Long = 150.644
activity.addnew(MapWebView,0,0,100%x,100%y)
HtmlCode = "<!DOCTYPE html><html><head><meta name='viewport' content='initial-scale=1.0, user-scalable=no' /><style type='text/css'>  html { height: 100% }  body { height: 100%; margin: 0px; padding: 0px }#map_canvas { height: 100% }</style><script type='text/javascript'    src='http://maps.google.com/maps/api/js?sensor=true'></script><script type='text/javascript'>  function initialize() {    var latlng = new google.maps.LatLng(" & Lat & "," & Long & ");    var myOptions = {      zoom: 16,      center: latlng,      mapTypeId: google.maps.MapTypeId.ROADMAP    };   var map = new google.maps.Map(document.getElementById('map_canvas'),  myOptions); var marker0 = new google.maps.Marker({ position: new google.maps.LatLng(" & Lat & "," & Long & "),map: map,title: '',clickable: false,icon: '' });   }</script></head><body onload='initialize()'>  <div id='map_canvas' style='width:100%; height:100%'></div></body></html>"
webview1.LoadHtml(HTML_Code)
Two different names for the same variable
Two different names for the same view
addnew instead of AddView
Long is a keyword and is not accepted as a variable.

The code below works OK, I added the zoom factor as a parameter (tested in the Emulator with B4A V1.48).
B4X:
Sub Globals
 Dim MapWebView As WebView
End Sub
 
Sub Activity_Create(FirstTime As Boolean)
 MapWebView.Initialize("")
 Activity.AddView(MapWebView,0,0,100%x,100%y)
 ShowMap(46.138, 7.118, 15)
End Sub

Sub ShowMap(Latitude As Float, Longitude As Float, Zoom As Int)
 Dim HtmlCode As String
 HtmlCode = "<!DOCTYPE html><html><head><meta name='viewport' content='initial-scale=1.0, user-scalable=no' /><style type='text/css'> html { height: 100% } body { height: 100%; margin: 0px; padding: 0px }#map_canvas { height: 100% }</style><script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=true'></script><script type='text/javascript'> function initialize() { var latlng = new google.maps.LatLng(" & Latitude & "," & Longitude & "); var myOptions = { zoom: "&Zoom&", center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions); var marker0 = new google.maps.Marker({ position: new google.maps.LatLng(" & Latitude & "," & Longitude & "),map: map,title: '',clickable: false,icon: '' }); }</script></head><body onload='initialize()'> <div id='map_canvas' style='width:100%; height:100%'></div></body></html>"
 MapWebView.LoadHtml(HtmlCode)
End Sub
But anyway very interesting and very easy to show Google Maps with all functions, zoom, moving etc.

Best regards.
 
Last edited:

dealsmonkey

Active Member
Licensed User
Longtime User
Thanks for clearing it up Klaus.

I changed the variables from my app with thinking :sign0104:

I have also changed my app to just show the +- scroll buttons.

Just add
B4X:
disableDefaultUI: true, zoomControl: true,

after
B4X:
zoom: 16,      center: latlng,

Neil
 
Last edited:

CidTek

Active Member
Licensed User
Longtime User
Hi Everyone,

Until the mapview becomes available, I have managed to "squeeze" the googlemaps V3 JS API into a webview for an app I am working on :sign0060:

The benefit of the JS map over a static map is complete scrolling etc.

To give back to the community here is the code. All the code does is generate the HTML & javscript code to generate the maps !

I will create a mod if anyone is interested.

You will need an activity with a webview. I have set my webview in code to 100%x, 100%y

Neil

This is really cool stuff - goodbye static maps!!!

In my static map I pass a string describing marker color blue and then several lat/longs to place pushpins on the map.

How would you handle that in your code?
 

mistermentality

Active Member
Licensed User
Longtime User
n my static map I pass a string describing marker color blue and then several lat/longs to place pushpins on the map.

How would you handle that in your code?

I found an example that might be of use to you in answering your question. The example code is....

B4X:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

<!-- Reference to the map control -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?

sensor=false">
</script>

<script type="text/javascript">
var map;
function initialize() 
{
var myLatlng = new google.maps.LatLng(39.828181,-91.57955);
// sets the center of the map to the varible "LatLong" that contains the 

coordinates

var myOptions = 
{
zoom: 16,
// Zoom level for initial map. Valild vaues range form 0 to 20

center: myLatlng,
mapTypeId: google.maps.MapTypeId.HYBRID
// sets the type of map to be displayed
// HYBRID - displays a transparent layer of major streets on satellite images
// ROADMAP - displays a normal street map 
// SATELLITE - displays satellite images
// TERRAIN - displays maps with physical features such as terrain
}

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

var infowindow = new google.maps.InfoWindow(); 
// set the variable infowindow 

var marker = new google.maps.Marker
// set the variable marker
(
{
position: new google.maps.LatLng(39.828181,-91.57955),
// set the geographic position for the marker

map: map, 
// puts the marker on the specified map 

title:"This is the pop up description for the marker",
// text that will display when the mouse cursor hovers over the marker

icon: 'http://google-maps-icons.googlecode.com/files/sight.png'
// location of image file that will be used as a marker
}
)
;


google.maps.event.addListener
// Event addlistener for info window of marker
(
marker, 
// associates the action with the marker named marker

'click', 
// declares which event will trigger the event
// Valid values are as follows
// click, dblclick, mousedown, mousemove, mouseout, mouseover,mouseup, rightclick 


function() 
{
infowindow.setContent('<font color=#FF00FF>Title of pop up window</font>'); 
// sets the content for the info window (any valid html will do here

infowindow.open(map,marker);
// sets the info window to open based on the event
}
);


}
</script>
</head>
<title>Basic Google Map with an Image Marker v3</title>
<body bgcolor="#FFFFFF" onload="initialize()">

<div id="map_canvas" style="width:100%; height:100%"></div>

</body>
</html>

This puts one marker on the map with a pop up description and your choice of marker icon.

Dave
 

CidTek

Active Member
Licensed User
Longtime User
I found an example that might be of use to you in answering your question. The example code is....

This puts one marker on the map with a pop up description and your choice of marker icon.

Dave

Thanks for that - it is well commented. I still have to figure out how to build a string containing many markers and plug that into the code.
 

mistermentality

Active Member
Licensed User
Longtime User
That code doesn't work. Have you tested it in a browser?

No I did a google search for an answer to your problem and found that was the simplest example, have tested the following code though:

B4X:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
<title>Google Maps API v3 Test...</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript" src="http://maps.google.com/maps/api/js?

sensor=false"></script>
<script type="text/javascript">
//<![CDATA[
  var map;
  var markers = new Array();
  function initialize() {
    var map_center = new google.maps.LatLng(39.2,-84.479381);
    var store_locations = new Array();
    store_locations = [ 
        new google.maps.LatLng(39.112456,-84.574779),
        new google.maps.LatLng(39.314153,-84.261379),
        new google.maps.LatLng(39.197099,-84.667579),
        new google.maps.LatLng(39.16836,-84.479381)
        ];
    var myOptions = {
      zoom: 10,
      center: map_center,
      mapTypeId: google.maps.MapTypeId.HYBRID
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    for(i=0;i<store_locations.length;i++)
    {
        markers[i] = new google.maps.Marker(
           { position: store_locations[i],
             map: map,
             title: "Store " + (i+1)
           } );
        google.maps.event.addListener(markers[i], 'click', 
            function() {
              markerClick(this);
            }
        );
    }
    function markerClick( mark )
    {
      for ( var m = 0; m < markers.length; ++m )
      {
        if ( markers[m] == mark ) 
        {
             map.set_center(store_locations[m]);
             map.set_zoom(16);
             return;
        }
      }
    }
    
  }
//]]>
</script>
<style type="text/css">
#map_canvas {width:400%;height:400px}

</style>
</head>
<body onload="initialize()">
<div id="map_container">
  <div id="map_canvas"></div>
  
</div>
</body>
</html>

Dave
 

CidTek

Active Member
Licensed User
Longtime User
That does give me a map but no pushpins using IE8.

What markers are you seeing?

Whoa - I do see the markers now. The map returned was 3 times wider than my browser and I just moved the scrollbar.

The thing I also learned is that you cannot pass the lat/long as strings in javascript for this to work.

Thanks for finding this.
 

klaus

Expert
Licensed User
Longtime User
I played a bit with GoogleMaps in a WebView.

The display routine in the attached test program can do following:
- Center the map on given coordinates
- Display the map with the given zoom level
- Display or hide the MapTypeControl
- Display or hide the ZoomControl
- Display or hide the ScaleControl
- Set the ScaleControlPosition
- Display or hide a marker at the map center
- Display or hide markers
- Drag the markers
- Display or hide a polyline
- Set polyline color
- Set polyline opacity
- Set polyline width

Variables for the map display routine.
' CenterLat = latitude of map center in degrees
' CenterLong = longitude of map center in degrees
' Zoom = zomm index 0 - 21
' MapTypeControl = true displays the map type control
' DispZoomControl = true displays the zoom control otherwise false
' ScaleControl = true displays the zoom control otherwise false
' ScaleControlPosition = position of the scale control TOP_LEFT, TOP_CENTER, TOP_RIGHT, LEFT_CENTER, RIGHT_CENTER, BOTTOM_LEFT, BOTTOM_CENTER, BOTTOM_RIGHT
' DispMarkerCenter = true sets a marker on the center of the map
' MarkerLat = List of lat positions of the markers
' MarkerLong = List of long positions of the markers
' DipsMarkers = true displays the markers
' DispPolyline = true displays a polyline with the markers as vertices
' PolyLineColor = polyline color hexadecimal #ff0000 = red #00ff00 = green #0000ff = blue
' PolyLineOpacity = polyline opacity 0.0 transparent 1.0 full opaque
' PolyLineWidth = polyline width in pixels

I tryed to implement a click event for the markers but it doesn't work, at least on the Emulator.

Best regards.
 

Attachments

  • GoogleMapsPlus.zip
    6.5 KB · Views: 1,759
  • GoogleMapsPlus.jpg
    GoogleMapsPlus.jpg
    46.2 KB · Views: 1,407

CidTek

Active Member
Licensed User
Longtime User
I played a bit with GoogleMaps in a WebView.

The display routine in the attached test program can do following:
- Center the map on given coordinates
- Display the map with the given zoom level
- Display or hide the MapTypeControl
- Display or hide the ZoomControl
- Display or hide the ScaleControl
- Set the ScaleControlPosition
- Display or hide a marker at the map center
- Display or hide markers
- Drag the markers
- Display or hide a polyline
- Set polyline color
- Set polyline opacity
- Set polyline width

Best regards.

That's really good stuff klaus!

If you want to fit all the markers to the webview instead of using zoom then there is a good tip here.

Zoom-to-Fit All Markers on Google Map v3 | Nine-One-One... Need Code, Help!
 

Cor

Active Member
Licensed User
Longtime User
Hello Klaus,

Nice work

do you have an example for the marker click event,

i can try it on my tablet
 

Cor

Active Member
Licensed User
Longtime User
added eventlistener copied html code into extern file and run into browser

clicking on marker, showing alert box

so code is correct

seems that webview does not respond to events or is not in edit mode
 

klaus

Expert
Licensed User
Longtime User
Hi Cor,

Thank's for testing.
The 'strange' thing is that dragging a marker works on the emulator.

Sorry for the somewhat late answer, but I accepted a job for the company I worked for and that takes me two whole days a week till end of june.

Best regards.
 
Last edited:
Top