Android Tutorial Googlemaps V3 In A Webview

dealsmonkey · May 5, 2011

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

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

Erel · May 13, 2011

There is no such event in WebView.

wes58 · May 13, 2011

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

klaus · May 13, 2011

Cor said:
...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 · Dec 21, 2011

wes58 said:
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 · Jan 8, 2012

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?

bluedude · Mar 23, 2012

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,

klaus · Mar 23, 2012

What click event are you speaking of ?
You should have a look at the GPSExample, it's more advanced than the example in this thread.

Best regards.

CidTek · Mar 15, 2013

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

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?

klaus · Mar 15, 2013

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.

CidTek · Mar 15, 2013

klaus said:
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 · Mar 15, 2013

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 · Mar 15, 2013

My understanding is that using java Script in the V3 Api that Goggle will do the calculations for you via the Map.fitBounds( ) method.

This is discussed at Zoom-to-Fit All Markers on Google Map v3 | Salman's Web Development Blog

However my attempts to plug that into your sample code posted in this thread a few message up fail due to my lack of js abilities.
http://www.b4x.com/forum/basic4andr...als/9005-googlemaps-v3-webview.html#post50392

Have you or anyone else figured out how to this?

klaus · Mar 15, 2013

I have never used the Map.fitBounds( ) method.

Best regards.

CidTek · Mar 15, 2013

In your CalcMapZoom sub there is a reference to tilesize

Scale0 = MapViewer.Width / TileSize * 360

How would you adapt the sub to work with the GoogleMapsPlus sample you posted at...
http://www.b4x.com/forum/basic4andr...als/9005-googlemaps-v3-webview.html#post50392

which doesn't use tiles.

klaus · Mar 15, 2013

TileSize = 256

Best regards.

CidTek · Mar 16, 2013

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?

CidTek · Mar 17, 2013

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

CidTek · Mar 18, 2013

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.

Mashiane · Jul 23, 2013

Excel piece of code. Thanks. Question, how do you get the map to return the longitude and latitude of the current user location?

Android Tutorial Googlemaps V3 In A Webview

Active Member

B4X founder

Active Member

Expert

Expert

Member

Well-Known Member

Expert

Active Member

Expert

Active Member

Expert

Active Member

Expert

Active Member

Expert

Active Member

Attachments

Active Member

Active Member

Attachments

Expert

Privacy & Transparency

Privacy & Transparency