Android Tutorial Googlemaps V3 In A Webview

klaus · May 5, 2011

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.

dealsmonkey · May 5, 2011

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

CidTek · May 5, 2011

dealsmonkey said:
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 · May 7, 2011

CidTek said:
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 · May 7, 2011

mistermentality said:
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 · May 7, 2011

If you check out How to add Multiple Markers with Single infowindow - Google Maps | How To Get Data it will show you how to add as many markers as needed

Dave

CidTek · May 7, 2011

mistermentality said:
If you check out How to add Multiple Markers with Single infowindow - Google Maps | How To Get Data it will show you how to add as many markers as needed

Dave

That code doesn't work. Have you tested it in a browser?

mistermentality · May 8, 2011

CidTek said:
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 · May 8, 2011

mistermentality said:
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:
Dave

That does give me a map but no pushpins using IE8.

What markers are you seeing?

CidTek · May 8, 2011

CidTek said:
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.

Cor · May 10, 2011

Is it possible to get info from marker and act on it like coordinates etc.

klaus · May 10, 2011

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.

CidTek · May 10, 2011

klaus said:
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!

dealsmonkey · May 10, 2011

Excellent work Klaus, I've been a bit bogged down to do anymore with this.

Cor · May 10, 2011

Hello Klaus,

Nice work

do you have an example for the marker click event,

i can try it on my tablet

klaus · May 10, 2011

Hi Cor,

In the prgram in my post, you can uncomment lines 87, 90 and 93.
Doing so you should get an alert box for markerA and for the other markers the map should be centered on that marker.

Best regards.

Merlot2309 · May 10, 2011

Hello Klaus,

Thank you so much.

Helen

Cor · May 10, 2011

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 · May 12, 2011

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.

Android Tutorial Googlemaps V3 In A Webview

klaus

Expert

dealsmonkey

Active Member

CidTek

Active Member

mistermentality

Active Member

CidTek

Active Member

mistermentality

Active Member

CidTek

Active Member

mistermentality

Active Member

CidTek

Active Member

CidTek

Active Member

Cor

Active Member

klaus

Expert

Attachments

CidTek

Active Member

dealsmonkey

Active Member

Cor

Active Member

klaus

Expert

Merlot2309

Active Member

Cor

Active Member

klaus

Expert