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
 

Cor

Active Member
Licensed User
Longtime User
Hello Klaus,

dragging on the device is working

but can we have an event when dragging is done?

same as clicking

maybe it is not supported yet by webview

Maybe Erel can answer this
 

wes58

Active Member
Licensed User
Longtime User
Is there any way to update position of the marker if position of the marker changes without redrawing (downloading) the whole map again?
 

klaus

Expert
Licensed User
Longtime User
...but can we have an event when dragging is done?
The event does exist in the GoogleMaps API.
dragstart, drag and dragend do exist and return the marker position.

But as Erel said those are not supported in the WebView view.

@wes58
This would be possible with the dragend event. But not supported (yet ? )

By the way, the title parameter of a marker has no effect on the display either.

Best regards.
 

klaus

Expert
Licensed User
Longtime User
Is there any way to update position of the marker if position of the marker changes without redrawing (downloading) the whole map again?
This is possible now, thanks to warwounds WebViewExtra library.
Have a look at the GPS Example it's in the MapDisp routine.

Best regards.
 

gehrlekrona

Member
Licensed User
Longtime User
Webview and Clickable markers/labels?

Hi, is it possible using the webview and get clickable markers? Witth clickable makers I mean like in a "real" browser you can have URL's that you can click on and get to the web page, but it doesn't seem to work with the webview.
I can open up the webview (web page with google maps and markers) and I can click on the URL in the info window, but it doesn't work in Webview.

Anyone?
 
Last edited:

bluedude

Well-Known Member
Licensed User
Longtime User
Click and moving to position without refreshing the map

Hi Klaus,

I still cannot get the click event done, all code is there to execute it but the event isn't generated.

Also something else, where exactly in the MapDisp code is something that shows a new position without loading the whole HTML again?

Cheers,
 

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

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.

Does anyone know how to get zoom to fit working with the Webview code sample Klaus posted?
 

CidTek

Active Member
Licensed User
Longtime User
Sorry, but I don't understand what exactly you want to do.
You can find a more advanced routine in the GPS Example program.

Best regards.

Instead of assigning a fixed zoom I would like the map to to zoom in tight as possible but still include all the markers. Current location wouldn't necessarily be centered but thats not a problem.
 

klaus

Expert
Licensed User
Longtime User
In the GPSExample program I did it that way:
B4X:
Sub CalcMapZoom
    ' Calculates the bounds of a GPS path and the zoom level
    Dim i As Int
    Dim Scale As Double
    Dim Scale0 As Double
    
    GPSPathLngMax = -180
    GPSPathLngMin = 180
    GPSPathLatMax = -90
    GPSPathLatMin = 90
    
    ' calculate the min and max lat, lng values of the GPS path
    For i = 0 To GPSPath.Size -1
        Dim loc As GPSLocation
        loc = GPSPath.Get(i)
        GPSPathLngMax = Max(GPSPathLngMax, loc.Longitude)
        GPSPathLngMin = Min(GPSPathLngMin, loc.Longitude)
        GPSPathLatMax = Max(GPSPathLatMax, loc.Latitude)
        GPSPathLatMin = Min(GPSPathLatMin, loc.Latitude)
    Next
    
    GPSPathLngMean = (GPSPathLngMax + GPSPathLngMin) / 2
    GPSPathLatMean = (GPSPathLatMax + GPSPathLatMin) / 2
    
    MapZoomLevel = 20
    Scale0 = MapViewer.Width / TileSize * 360 
    If (GPSPathLngMax - GPSPathLngMin) / MapViewer.Width > (GPSPathLatMax - GPSPathLatMin) / MapViewer.Height / CosD(GPSPathLatMean) Then
        Scale = Scale0 / Power(2, MapZoomLevel)
        Do While Scale <= GPSPathLngMax - GPSPathLngMin
            MapZoomLevel = MapZoomLevel - 1
            Scale = Scale0 / Power(2, MapZoomLevel)
        Loop
    Else
        Scale0 = Scale0 / CosD(GPSPathLatMean)
        Scale = Scale0 / Power(2, MapZoomLevel)
        Do While Scale <= GPSPathLatMax - GPSPathLatMin
            MapZoomLevel = MapZoomLevel - 1
            Scale = Scale0 / Power(2, MapZoomLevel)
        Loop
    End If
End Sub
Best regards.
 

CidTek

Active Member
Licensed User
Longtime User

CidTek

Active Member
Licensed User
Longtime User
I have modified your sample project and added the CalcMapZoom code you posted today. It seems that it is zooming in too much.

I have attached the test project and if you comment out line 77 you will get the original hardcoded zoom=15 otherwise it uses your CalcMapZoom code.

Any ideas?
 

Attachments

  • GoogMapsPlusAutoZoom.zip
    7.2 KB · Views: 407

CidTek

Active Member
Licensed User
Longtime User
Hi Klaus, have you had a chance to look at the sample code I uploaded? The CalcMapZoom is zooming in too tight.
 

CidTek

Active Member
Licensed User
Longtime User
Well I finally got the javascript working for zooming to fit the boundary of all the marker pins.

All this time my problem was not being aware of case sensitive issues with js code and a single 'Map' instead of 'map' was thwarting me.

I have attached the sample code in a project that does not do much except highlight the technique of placing markers and then fitting the zoom level based on the boundary.

You can comment out or add more locations to see the changes in zoom level.

For some reason tapping a pin is not showing the title but I only noticed this now as I have to post and run.
 

Attachments

  • GoogleMapsV3AutoZoom.zip
    6.9 KB · Views: 517
Last edited:
Top