Android Tutorial GOOGLE MAPS ON WEBVIEW (No API key)

Status
Not open for further replies.
Edit by Erel: Don't use WebView for this. Unlike Google Maps SDK, it is not free, more difficult to implement and Google Maps SDK will work better.

As of June 11, 2018 all websites need an API key to use Google maps. Without it, you will see this: "This page can't load Google Maps correctly” and the map will display “For development purposes only"

Hello Guys;

I needed to route calc on maps. and Completed it.
it no need GOOGLE API KEY, it used Webview with HTML+JS.


You need on Desinger mode;
  • Webview1
  • Button1
  • Button2
  • Button3
  • Button4
  • Button5
  • Button6
You need external lib.

The sample has:
  • show map your lat-lag
  • add poi/marker on map with your lat-lag
  • delete your last marker
  • Draw route on map for your destination on map for 2 point
  • calculate distance your route
  • set /get center value of map
Screenshot_2016-08-24-13-33-00.png Screenshot_2016-08-24-13-35-25.png Screenshot_2016-08-24-13-35-30.png

B4X:
#Region  Project Attributes
    #ApplicationLabel: GOOGLE MAPS ON WEBVIEW
    #VersionCode: 1
    #VersionName:
    'SupportedOrientations possible values: unspecified, landscape or portrait.
    #SupportedOrientations: unspecified
    #CanInstallToExternalStorage: False
#End Region

#Region  Activity Attributes
    #FullScreen: False
    #IncludeTitle: True
#End Region

Sub Process_Globals
    'These global variables will be declared once when the application starts.
    'These variables can be accessed from all modules.

End Sub

Sub Globals
    'These global variables will be redeclared each time the activity is created.
    'These variables can only be accessed from this module.
    Private WebView_ex As WebViewExtras
    Private WebView1 As WebView
    Private Button1 As Button
    Private Button2 As Button
    Private Button3 As Button
    Private Button4 As Button
    Private Button5 As Button
    Private Button6 As Button
End Sub

Sub Activity_Create(FirstTime As Boolean)
    'Do not forget to load the layout file created with the visual designer. For example:
    Activity.LoadLayout("L1")
    Dim x As String
    'mymap.Initialize2(Me,"mymap",WebView1)
    x=File.ReadString(File.DirAssets,"YOUR_HTML_FILE.txt")
    WebView1.LoadHtml(x)
    WebView_ex.addJavascriptInterface(WebView1, "B4A")
End Sub

Sub Activity_Resume

End Sub





Sub Activity_Pause (UserClosed As Boolean)

End Sub


Sub WebView1_PageFinished (Url As String)
    Log("Map loaded on Page")
End Sub'

'initilize action s for new map
'initialize2(CenterLat,CenterLag,zoom)
Sub Button1_Click
    Dim lat1,lat2,lag1,lag2 As Double
    Dim zoom As Int
    lat1=41.022222
    lag1=28.751112
    zoom=15
    WebView_ex.executeJavascript(WebView1, "initialize2("&lat1&","&lag1&","&zoom&")")
End Sub

' calculate and draw for 2 points
'center>>"Lat,Lag"
'poiadd2(Center1,Center2)
Sub Button2_Click
    Log("Route drawing...")
    Dim lat1,lat2,lag1,lag2 As Double
    lat1=0'41.026742
    lat2=0'41.073524
    lag1=28.805635
    lag2=28.913170
    WebView_ex.executeJavascript(WebView1, "calcRoute2('"&lat1&", "&lag1&"','"&lat2&", "&lag2&"')")
End Sub


Sub Button6_Click
    Log("settding Center...")

Dim lat1,lat2,lag1,lag2 As Double
    Dim zoom As Int
    lat1=41.011111
    lag1=28.705635
    zoom=14
    Log("Marker adding...")

    WebView_ex.executeJavascript(WebView1, "SetCenter("&lat1&","&lag1&")")
End Sub

Sub Button5_Click
    Log("reading Center...")
    WebView_ex.executeJavascript(WebView1, "ReadCenter()")
End Sub

'delete last marker/poi
Sub Button3_Click
    Log("Marker deleting...")
    WebView_ex.executeJavascript(WebView1, "poidelete()")
End Sub

' add MARKER/POİ on map with animated
' poiadd2(Lat,Lag,zoom)
Sub Button4_Click
    Dim lat1,lat2,lag1,lag2 As Double
    Dim zoom As Int
    lat1=41.011111
    lag1=28.705635
    zoom=14
    Log("Marker adding...")
    WebView_ex.executeJavascript(WebView1, "poiadd2("&lat1&","&lag1&","&zoom&")")
End Sub

'***********************************************************************************
'***************** THESE SUBS RETURN FROM GOOGLE MAP ON WEBVIEW**********************************************
'***********************************************************************************
Sub MyMap_initialized(Statuts As String)
    Log("Map initilazed and showed map")
    ToastMessageShow("Map initilazed and showed map",True)
End Sub


Sub MyMap_Poi_Added(Statuts As String)
    Log("NEw poi addded on map")
    ToastMessageShow("NEw poi addded on map",True)
End Sub

Sub MyMap_Poi_Deleted(Statuts As String)
    Log("Last poi deleted on map")
    ToastMessageShow("Last poi deleted on map",True)
End Sub

Sub MyMap_Calc_Distance(Statuts As String)
    Log ("Distance for between A - B :" &Statuts)
    ToastMessageShow("Distance for between A - B :" &Statuts,True)
End Sub

Sub MyMap_Calc_Distance_Err(Statuts As String)
    Log("Route error, No way...")
    ToastMessageShow("Route error, No way...",True)

End Sub
Sub MyMap_ReadCenter(Statuts As String)
    Log("center:" & Statuts)
    ToastMessageShow("center:"&Statuts,True)
End Sub
Sub MyMap_SetCenter(Statuts As String)
    Log("Setcenter:" & Statuts)
    ToastMessageShow("Set center:"&Statuts,True)
End Sub




HTML code For webview; Write TXT file and save project file. File.Dirasset

HTML:
<html>
<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
  <title>Distance Calculator</title>
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  <style type="text/css">
body {
  margin: 0;
}
   #map_canvas {
    height: 100%;
   }
  </style>
  <script type="text/javascript">
  var directionDisplay;
  var directionsService = new google.maps.DirectionsService();
  var map;

var markerX;

  //--------------------------------------------------------------------------
  function initialize2(enlem,boylam,zoomx) {
   directionsDisplay = new google.maps.DirectionsRenderer();
   var melbourne = new google.maps.LatLng(enlem,boylam);
   var myOptions = {
    zoom:zoomx,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: melbourne
   }

   map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
   directionsDisplay.setMap(map);
  B4A.CallSub('MyMap_initialized', true,true);

  }
  //--------------------------------------------------------------------------

//--------------------------------------------------------------------------
  function calcRoute2(EB1,EB2) {
   //var start = document.getElementById("start").value;
   //var end = document.getElementById("end").value;
   var distanceInput = document.getElementById("distance");

   var request = {
    origin:EB1,
    destination:EB2,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
   };
//------------resize and reload map---------------
google.maps.event.trigger(map,'resize');
    map.setZoom(map.getZoom());
//--------------------
   directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
     directionsDisplay.setDirections(response);
     //distanceInput.value =response.routes[0].legs[0].distance.value / 1000;
    B4A.CallSub('MyMap_Calc_Distance', true,response.routes[0].legs[0].distance.value / 1000);
    } else {
    //distanceInput.value ="NO WAY!!!";
    B4A.CallSub('MyMap_Calc_Distance_Err', true,true);
}
   });
  }

function poiadd2(enlem,boylam,zoom) {
//var enlem = document.getElementById("enlem").value;
//var boylam = document.getElementById("boylam").value;

var myCenter = new google.maps.LatLng(enlem, boylam);
marker=new google.maps.Marker({
  position:myCenter,
center: myCenter,
  animation:google.maps.Animation.BOUNCE
  });

marker.setMap(map);
map.panTo(marker.getPosition());
map.setZoom(zoom);
poivar=true;
B4A.CallSub('MyMap_Poi_Added', true,true);
}
//--------------------------------------------------------------------------
//--------------------------------------------------

//--------------------------------------------------------------------------
//--------------------------------------------------
function poidelete() {
marker.setMap(null);
marker=""
B4A.CallSub('MyMap_Poi_Deleted', true,true);
}
//--------------------------------------------------------------------------
//--------------------------------------------------
function ReadCenter() {
B4A.CallSub('MyMap_ReadCenter', true,' '+map.getCenter());
}
//--------------------------------------------------------------------------

function SetCenter(enlem,boylam) {
map.setCenter(new google.maps.LatLng(enlem,boylam));
B4A.CallSub('MyMap_SetCenter', true,true);
}



  </script>

</head>
<body>
  <div id="map_canvas"></div>
</body>
</html>
 
Last edited by a moderator:

victormedranop

Well-Known Member
Licensed User
Amazing, But I have some problems with adding a point (of my location).
some help please.
B4X:
WebView_ex.executeJavascript(WebView1, "poiadd2("&lat1&","&lag1&","&zoom&")")
 

tango

Member
Licensed User
Tayfur Merhaba,
did you have any script function to rotate map for one point to second point. i want to see my car direction to front side for all time.
i tried beraing, tilt, moveto esc. with javascript but no response
thanks for help
 

DonManfred

Expert
Licensed User
Helow it’s possible used in B4J ??
I guess no. B4A Webview and B4J Webview are different.
Additionally there is no such thing like GoogleMaps without Apikey since years.
Also note the 1st sentence in #1.

You should use jGoogleMaps in B4J.
 

busmatic

Active Member
Licensed User
Thanks for the info about BJ , but I tray to run this one in b and ,,, don´t work black screen no show the map.
any other advice
thanks
 

werner_Fourie

Member
Licensed User
Hi All
Never worked with WebView.
I just see a blank WebView using the above mentioned code and HTML code.
Location turned on.
Using B4A9.90 and Android 10
Any suggestions.
Thanks
 
Status
Not open for further replies.
Top