Android Code Snippet [B4X] Custom GoogleMaps

This is an example of how you can customize a Map.
Through the B4XCanvas functions it is possible to create the map with photos, text, etc.
The classes used are MapScale + GoogleMapsExtra (https://www.b4x.com/android/forum/threads/class-googlemapsextra.56871/)

The following code is an example for B4i but can also be extended to B4A and B4J.


B4X:
'Code module
#Region  Project Attributes
    #ApplicationLabel: B4i custom Maps
    #Version: 1.0.0
    'Orientation possible values: Portrait, LandscapeLeft, LandscapeRight and PortraitUpsideDown
    #iPhoneOrientations: Portrait, LandscapeLeft, LandscapeRight
    #iPadOrientations: Portrait, LandscapeLeft, LandscapeRight, PortraitUpsideDown
    #PlistExtra:<key>NSLocationWhenInUseUsageDescription</key><string>Used to display the current navigation data.</string>
    #PlistExtra:<key>NSLocationUsageDescription</key><string>Used to display the current navigation data.</string>
#End Region


Sub Process_Globals
    'These global variables will be declared once when the application starts.
    'Public variables can be accessed from all modules.
    Public App As Application
    Public NavControl As NavigationController
    Private Page1 As Page
    Private gmap As GoogleMap
    Private ApiKey As String = "xxxx"
    
    Private MapScale1 As MapScale
    Private Panel1 As Panel
    Private CameraChangedIndex As Int
    Dim xui As XUI
    
End Sub

Private Sub Application_Start (Nav As NavigationController)
    NavControl = Nav
    Page1.Initialize("Page1")
    Page1.RootPanel.LoadLayout("1")
    Page1.Title = "Sicilia Map - Devil"
    NavControl.ShowPage(Page1)
    AddMap
    Dim no As NativeObject
    Log("Version: " & no.Initialize("GMSServices").RunMethod("SDKVersion", Null).AsString)
End Sub

Private Sub AddMap
    gmap.Initialize("gmap", ApiKey)
    Panel1.AddView(gmap, 0, 0, 100%X, 100%y)
    gmap.MapType = gmap.MAP_TYPE_HYBRID
    gmap.GetUiSettings.CompassEnabled = True
    gmap.GetUiSettings.MyLocationButtonEnabled = True
    gmap.MyLocationEnabled = True
    
    'add three markers
    gmap.AddMarker3(37.098396, 13.928318, $"Baia del Pirata${CRLF}Offerta Speciale|baia0"$,  LoadBitmap(File.DirAssets, "sailing.png"))
    gmap.AddMarker3(37.099458, 13.921323, "Baia Roccella|baia1", LoadBitmap(File.DirAssets, "scubadiving.png"))
    gmap.AddMarker3(37.097489, 13.913918, "Baia della Dama|baia2", LoadBitmap(File.DirAssets, "scubadiving.png"))

    'change the camera position
    Dim c As CameraPosition
    c.Initialize(37.10, 13.92, 14)
    gmap.AnimateCamera(c)

    
End Sub

Sub gmap_LongClick (Point As LatLng)
    Log(Point)
End Sub

Sub CreateBitmap(text As String) As B4XBitmap
    Dim xui As XUI
    Dim p As B4XView = xui.CreatePanel("")
    p.SetLayoutAnimated(0, 0, 0, 125dip, 20dip)
    Dim c As B4XCanvas
    c.Initialize(p)
    c.DrawRect(c.TargetRect, xui.Color_White, True, 0)
    c.DrawText(text, c.TargetRect.CenterX, c.TargetRect.CenterY + 9dip, xui.CreateDefaultBoldFont(16), xui.Color_Black, "CENTER")
    c.Invalidate
    Return c.CreateBitmap
End Sub

Sub CreateRoundBitmap (Input As B4XBitmap, Size As Int) As B4XBitmap
    If Input.Width <> Input.Height Then
        'if the image is not square then we crop it to be a square.
        Dim l As Int = Min(Input.Width, Input.Height)
        Input = Input.Crop(Input.Width / 2 - l / 2, Input.Height / 2 - l / 2, l, l)
    End If
    Dim c As B4XCanvas
    Dim xview As B4XView = xui.CreatePanel("")
    xview.SetLayoutAnimated(0, 0, 0, Size, Size)
    c.Initialize(xview)
    Dim path As B4XPath
    path.InitializeOval(c.TargetRect)
    c.ClipPath(path)
    c.DrawBitmap(Input.Resize(Size, Size, False), c.TargetRect)
    c.RemoveClip
    c.DrawCircle(c.TargetRect.CenterX, c.TargetRect.CenterY, c.TargetRect.Width / 2 - 2dip, xui.Color_White, False, 5dip) 'comment this line to remove the border
    c.Invalidate
    Dim res As B4XBitmap = c.CreateBitmap
    c.Release
    Return res
End Sub

Sub CreateRoundRectBitmap (Input As B4XBitmap, Radius As Float) As B4XBitmap
    Dim BorderColor As Int = xui.Color_White
    Dim BorderWidth As Int = 4dip
    Dim c As B4XCanvas
    Dim xview As B4XView = xui.CreatePanel("")
    xview.SetLayoutAnimated(0, 0, 0, Input.Width, Input.Height)
    c.Initialize(xview)
    Dim path As B4XPath
    path.InitializeRoundedRect(c.TargetRect, Radius)
    c.ClipPath(path)
    c.DrawRect(c.TargetRect, BorderColor, True, BorderWidth) 'border
    c.RemoveClip
    Dim r As B4XRect
    r.Initialize(BorderWidth, BorderWidth, c.TargetRect.Width - BorderWidth, c.TargetRect.Height - BorderWidth)
    path.InitializeRoundedRect(r, Radius - 0.7 * BorderWidth)
    c.ClipPath(path)
    c.DrawBitmap(Input, r)   
    c.RemoveClip
    c.Invalidate
    Dim res As B4XBitmap = c.CreateBitmap
    c.Release
    Return res
End Sub

Sub gmap_InfoWindowClick (SelectedMarker As Marker)
    Log("InfoWindow clicked: " & SelectedMarker)
    Log(SelectedMarker.Title)
    
End Sub

'Return Null for the default marker layout
Sub gmap_MarkerInfoWindow (OMarker As Object) As Object

    Dim SelectedMarker As Marker = OMarker
    
    Dim splitta() As String = Regex.Split("\|", SelectedMarker.Title)
    
    Dim p As Panel
    p.Initialize("")
    p.Color = Colors.White
    p.SetBorder(1,Colors.Black,20)
    p.SetLayoutAnimated(0, 1, 0, 0, 200, 200)
'    'Carico Foto

    Dim img As B4XBitmap = xui.LoadBitmapResize(File.DirAssets, splitta(1)&".jpg", 200dip, 150dip, True)
    Dim photo As ImageView
    photo.Initialize("")
    photo.Bitmap = CreateRoundRectBitmap(img, 20dip)
    p.AddView(photo, 0,0, 200, 150)
    'Carico Title Marker
    Dim lbl As TextView
    lbl.Initialize("")
    'lbl.Text = SelectedMarker.Title
    lbl.Text = splitta(0)
    lbl.TextColor = Colors.Black
    
    p.AddView(lbl, 10, photo.Height, 200, 80)
    Return p
End Sub



Private Sub Page1_Resize(Width As Int, Height As Int)
    If gmap.IsInitialized Then gmap.SetLayoutAnimated(0, 1, 0, 0, Width, Height)
End Sub

Sub gmap_CameraChange (Position As CameraPosition)
    MapScale1.Update(Position.Zoom, Position.Target.Latitude)
    CameraChangedIndex = CameraChangedIndex + 1
    Dim MyIndex As Int = CameraChangedIndex
    Sleep(200)
    If MyIndex = CameraChangedIndex Then
        Log("Finished moving for now!")
    End If
End Sub


Sub gmap_MarkerClick (SelectedMarker As Marker) As Boolean 'Return True to consume the click
    Dim ngm As NativeObject = gmap
    Dim infoWindowVisible As Boolean = True
    If ngm.GetField("selectedMarker").IsInitialized Then
        Dim current As Marker = ngm.GetField("selectedMarker")
        If current.Title = SelectedMarker.Title Then infoWindowVisible = False
    End If
    If infoWindowVisible Then
        Log("Snippet is shown")
    Else
        Log("Snippet is hidden")
    End If
    Return False
End Sub

A nice day with B4X
 

Nicolás Cieri

Active Member
Licensed User
This is an example of how you can customize a Map.
Through the B4XCanvas functions it is possible to create the map with photos, text, etc.
The classes used are MapScale + GoogleMapsExtra (https://www.b4x.com/android/forum/threads/class-googlemapsextra.56871/)

The following code is an example for B4i but can also be extended to B4A and B4J.


B4X:
'Code module
#Region  Project Attributes
    #ApplicationLabel: B4i custom Maps
    #Version: 1.0.0
    'Orientation possible values: Portrait, LandscapeLeft, LandscapeRight and PortraitUpsideDown
    #iPhoneOrientations: Portrait, LandscapeLeft, LandscapeRight
    #iPadOrientations: Portrait, LandscapeLeft, LandscapeRight, PortraitUpsideDown
    #PlistExtra:<key>NSLocationWhenInUseUsageDescription</key><string>Used to display the current navigation data.</string>
    #PlistExtra:<key>NSLocationUsageDescription</key><string>Used to display the current navigation data.</string>
#End Region


Sub Process_Globals
    'These global variables will be declared once when the application starts.
    'Public variables can be accessed from all modules.
    Public App As Application
    Public NavControl As NavigationController
    Private Page1 As Page
    Private gmap As GoogleMap
    Private ApiKey As String = "xxxx"
   
    Private MapScale1 As MapScale
    Private Panel1 As Panel
    Private CameraChangedIndex As Int
    Dim xui As XUI
   
End Sub

Private Sub Application_Start (Nav As NavigationController)
    NavControl = Nav
    Page1.Initialize("Page1")
    Page1.RootPanel.LoadLayout("1")
    Page1.Title = "Sicilia Map - Devil"
    NavControl.ShowPage(Page1)
    AddMap
    Dim no As NativeObject
    Log("Version: " & no.Initialize("GMSServices").RunMethod("SDKVersion", Null).AsString)
End Sub

Private Sub AddMap
    gmap.Initialize("gmap", ApiKey)
    Panel1.AddView(gmap, 0, 0, 100%X, 100%y)
    gmap.MapType = gmap.MAP_TYPE_HYBRID
    gmap.GetUiSettings.CompassEnabled = True
    gmap.GetUiSettings.MyLocationButtonEnabled = True
    gmap.MyLocationEnabled = True
   
    'add three markers
    gmap.AddMarker3(37.098396, 13.928318, $"Baia del Pirata${CRLF}Offerta Speciale|baia0"$,  LoadBitmap(File.DirAssets, "sailing.png"))
    gmap.AddMarker3(37.099458, 13.921323, "Baia Roccella|baia1", LoadBitmap(File.DirAssets, "scubadiving.png"))
    gmap.AddMarker3(37.097489, 13.913918, "Baia della Dama|baia2", LoadBitmap(File.DirAssets, "scubadiving.png"))

    'change the camera position
    Dim c As CameraPosition
    c.Initialize(37.10, 13.92, 14)
    gmap.AnimateCamera(c)

   
End Sub

Sub gmap_LongClick (Point As LatLng)
    Log(Point)
End Sub

Sub CreateBitmap(text As String) As B4XBitmap
    Dim xui As XUI
    Dim p As B4XView = xui.CreatePanel("")
    p.SetLayoutAnimated(0, 0, 0, 125dip, 20dip)
    Dim c As B4XCanvas
    c.Initialize(p)
    c.DrawRect(c.TargetRect, xui.Color_White, True, 0)
    c.DrawText(text, c.TargetRect.CenterX, c.TargetRect.CenterY + 9dip, xui.CreateDefaultBoldFont(16), xui.Color_Black, "CENTER")
    c.Invalidate
    Return c.CreateBitmap
End Sub

Sub CreateRoundBitmap (Input As B4XBitmap, Size As Int) As B4XBitmap
    If Input.Width <> Input.Height Then
        'if the image is not square then we crop it to be a square.
        Dim l As Int = Min(Input.Width, Input.Height)
        Input = Input.Crop(Input.Width / 2 - l / 2, Input.Height / 2 - l / 2, l, l)
    End If
    Dim c As B4XCanvas
    Dim xview As B4XView = xui.CreatePanel("")
    xview.SetLayoutAnimated(0, 0, 0, Size, Size)
    c.Initialize(xview)
    Dim path As B4XPath
    path.InitializeOval(c.TargetRect)
    c.ClipPath(path)
    c.DrawBitmap(Input.Resize(Size, Size, False), c.TargetRect)
    c.RemoveClip
    c.DrawCircle(c.TargetRect.CenterX, c.TargetRect.CenterY, c.TargetRect.Width / 2 - 2dip, xui.Color_White, False, 5dip) 'comment this line to remove the border
    c.Invalidate
    Dim res As B4XBitmap = c.CreateBitmap
    c.Release
    Return res
End Sub

Sub CreateRoundRectBitmap (Input As B4XBitmap, Radius As Float) As B4XBitmap
    Dim BorderColor As Int = xui.Color_White
    Dim BorderWidth As Int = 4dip
    Dim c As B4XCanvas
    Dim xview As B4XView = xui.CreatePanel("")
    xview.SetLayoutAnimated(0, 0, 0, Input.Width, Input.Height)
    c.Initialize(xview)
    Dim path As B4XPath
    path.InitializeRoundedRect(c.TargetRect, Radius)
    c.ClipPath(path)
    c.DrawRect(c.TargetRect, BorderColor, True, BorderWidth) 'border
    c.RemoveClip
    Dim r As B4XRect
    r.Initialize(BorderWidth, BorderWidth, c.TargetRect.Width - BorderWidth, c.TargetRect.Height - BorderWidth)
    path.InitializeRoundedRect(r, Radius - 0.7 * BorderWidth)
    c.ClipPath(path)
    c.DrawBitmap(Input, r)  
    c.RemoveClip
    c.Invalidate
    Dim res As B4XBitmap = c.CreateBitmap
    c.Release
    Return res
End Sub

Sub gmap_InfoWindowClick (SelectedMarker As Marker)
    Log("InfoWindow clicked: " & SelectedMarker)
    Log(SelectedMarker.Title)
   
End Sub

'Return Null for the default marker layout
Sub gmap_MarkerInfoWindow (OMarker As Object) As Object

    Dim SelectedMarker As Marker = OMarker
   
    Dim splitta() As String = Regex.Split("\|", SelectedMarker.Title)
   
    Dim p As Panel
    p.Initialize("")
    p.Color = Colors.White
    p.SetBorder(1,Colors.Black,20)
    p.SetLayoutAnimated(0, 1, 0, 0, 200, 200)
'    'Carico Foto

    Dim img As B4XBitmap = xui.LoadBitmapResize(File.DirAssets, splitta(1)&".jpg", 200dip, 150dip, True)
    Dim photo As ImageView
    photo.Initialize("")
    photo.Bitmap = CreateRoundRectBitmap(img, 20dip)
    p.AddView(photo, 0,0, 200, 150)
    'Carico Title Marker
    Dim lbl As TextView
    lbl.Initialize("")
    'lbl.Text = SelectedMarker.Title
    lbl.Text = splitta(0)
    lbl.TextColor = Colors.Black
   
    p.AddView(lbl, 10, photo.Height, 200, 80)
    Return p
End Sub



Private Sub Page1_Resize(Width As Int, Height As Int)
    If gmap.IsInitialized Then gmap.SetLayoutAnimated(0, 1, 0, 0, Width, Height)
End Sub

Sub gmap_CameraChange (Position As CameraPosition)
    MapScale1.Update(Position.Zoom, Position.Target.Latitude)
    CameraChangedIndex = CameraChangedIndex + 1
    Dim MyIndex As Int = CameraChangedIndex
    Sleep(200)
    If MyIndex = CameraChangedIndex Then
        Log("Finished moving for now!")
    End If
End Sub


Sub gmap_MarkerClick (SelectedMarker As Marker) As Boolean 'Return True to consume the click
    Dim ngm As NativeObject = gmap
    Dim infoWindowVisible As Boolean = True
    If ngm.GetField("selectedMarker").IsInitialized Then
        Dim current As Marker = ngm.GetField("selectedMarker")
        If current.Title = SelectedMarker.Title Then infoWindowVisible = False
    End If
    If infoWindowVisible Then
        Log("Snippet is shown")
    Else
        Log("Snippet is hidden")
    End If
    Return False
End Sub

A nice day with B4X
You are show me a BXi Sample, I know that this works on iOS, the problem is in BXa

This will show your form inside the tipically infowindow. :(

Andy suggestion??
Thanks
 

Nicolás Cieri

Active Member
Licensed User
This is an example of how you can customize a Map.
Through the B4XCanvas functions it is possible to create the map with photos, text, etc.
The classes used are MapScale + GoogleMapsExtra (https://www.b4x.com/android/forum/threads/class-googlemapsextra.56871/)

The following code is an example for B4i but can also be extended to B4A and B4J.


B4X:
'Code module
#Region  Project Attributes
    #ApplicationLabel: B4i custom Maps
    #Version: 1.0.0
    'Orientation possible values: Portrait, LandscapeLeft, LandscapeRight and PortraitUpsideDown
    #iPhoneOrientations: Portrait, LandscapeLeft, LandscapeRight
    #iPadOrientations: Portrait, LandscapeLeft, LandscapeRight, PortraitUpsideDown
    #PlistExtra:<key>NSLocationWhenInUseUsageDescription</key><string>Used to display the current navigation data.</string>
    #PlistExtra:<key>NSLocationUsageDescription</key><string>Used to display the current navigation data.</string>
#End Region


Sub Process_Globals
    'These global variables will be declared once when the application starts.
    'Public variables can be accessed from all modules.
    Public App As Application
    Public NavControl As NavigationController
    Private Page1 As Page
    Private gmap As GoogleMap
    Private ApiKey As String = "xxxx"
   
    Private MapScale1 As MapScale
    Private Panel1 As Panel
    Private CameraChangedIndex As Int
    Dim xui As XUI
   
End Sub

Private Sub Application_Start (Nav As NavigationController)
    NavControl = Nav
    Page1.Initialize("Page1")
    Page1.RootPanel.LoadLayout("1")
    Page1.Title = "Sicilia Map - Devil"
    NavControl.ShowPage(Page1)
    AddMap
    Dim no As NativeObject
    Log("Version: " & no.Initialize("GMSServices").RunMethod("SDKVersion", Null).AsString)
End Sub

Private Sub AddMap
    gmap.Initialize("gmap", ApiKey)
    Panel1.AddView(gmap, 0, 0, 100%X, 100%y)
    gmap.MapType = gmap.MAP_TYPE_HYBRID
    gmap.GetUiSettings.CompassEnabled = True
    gmap.GetUiSettings.MyLocationButtonEnabled = True
    gmap.MyLocationEnabled = True
   
    'add three markers
    gmap.AddMarker3(37.098396, 13.928318, $"Baia del Pirata${CRLF}Offerta Speciale|baia0"$,  LoadBitmap(File.DirAssets, "sailing.png"))
    gmap.AddMarker3(37.099458, 13.921323, "Baia Roccella|baia1", LoadBitmap(File.DirAssets, "scubadiving.png"))
    gmap.AddMarker3(37.097489, 13.913918, "Baia della Dama|baia2", LoadBitmap(File.DirAssets, "scubadiving.png"))

    'change the camera position
    Dim c As CameraPosition
    c.Initialize(37.10, 13.92, 14)
    gmap.AnimateCamera(c)

   
End Sub

Sub gmap_LongClick (Point As LatLng)
    Log(Point)
End Sub

Sub CreateBitmap(text As String) As B4XBitmap
    Dim xui As XUI
    Dim p As B4XView = xui.CreatePanel("")
    p.SetLayoutAnimated(0, 0, 0, 125dip, 20dip)
    Dim c As B4XCanvas
    c.Initialize(p)
    c.DrawRect(c.TargetRect, xui.Color_White, True, 0)
    c.DrawText(text, c.TargetRect.CenterX, c.TargetRect.CenterY + 9dip, xui.CreateDefaultBoldFont(16), xui.Color_Black, "CENTER")
    c.Invalidate
    Return c.CreateBitmap
End Sub

Sub CreateRoundBitmap (Input As B4XBitmap, Size As Int) As B4XBitmap
    If Input.Width <> Input.Height Then
        'if the image is not square then we crop it to be a square.
        Dim l As Int = Min(Input.Width, Input.Height)
        Input = Input.Crop(Input.Width / 2 - l / 2, Input.Height / 2 - l / 2, l, l)
    End If
    Dim c As B4XCanvas
    Dim xview As B4XView = xui.CreatePanel("")
    xview.SetLayoutAnimated(0, 0, 0, Size, Size)
    c.Initialize(xview)
    Dim path As B4XPath
    path.InitializeOval(c.TargetRect)
    c.ClipPath(path)
    c.DrawBitmap(Input.Resize(Size, Size, False), c.TargetRect)
    c.RemoveClip
    c.DrawCircle(c.TargetRect.CenterX, c.TargetRect.CenterY, c.TargetRect.Width / 2 - 2dip, xui.Color_White, False, 5dip) 'comment this line to remove the border
    c.Invalidate
    Dim res As B4XBitmap = c.CreateBitmap
    c.Release
    Return res
End Sub

Sub CreateRoundRectBitmap (Input As B4XBitmap, Radius As Float) As B4XBitmap
    Dim BorderColor As Int = xui.Color_White
    Dim BorderWidth As Int = 4dip
    Dim c As B4XCanvas
    Dim xview As B4XView = xui.CreatePanel("")
    xview.SetLayoutAnimated(0, 0, 0, Input.Width, Input.Height)
    c.Initialize(xview)
    Dim path As B4XPath
    path.InitializeRoundedRect(c.TargetRect, Radius)
    c.ClipPath(path)
    c.DrawRect(c.TargetRect, BorderColor, True, BorderWidth) 'border
    c.RemoveClip
    Dim r As B4XRect
    r.Initialize(BorderWidth, BorderWidth, c.TargetRect.Width - BorderWidth, c.TargetRect.Height - BorderWidth)
    path.InitializeRoundedRect(r, Radius - 0.7 * BorderWidth)
    c.ClipPath(path)
    c.DrawBitmap(Input, r)  
    c.RemoveClip
    c.Invalidate
    Dim res As B4XBitmap = c.CreateBitmap
    c.Release
    Return res
End Sub

Sub gmap_InfoWindowClick (SelectedMarker As Marker)
    Log("InfoWindow clicked: " & SelectedMarker)
    Log(SelectedMarker.Title)
   
End Sub

'Return Null for the default marker layout
Sub gmap_MarkerInfoWindow (OMarker As Object) As Object

    Dim SelectedMarker As Marker = OMarker
   
    Dim splitta() As String = Regex.Split("\|", SelectedMarker.Title)
   
    Dim p As Panel
    p.Initialize("")
    p.Color = Colors.White
    p.SetBorder(1,Colors.Black,20)
    p.SetLayoutAnimated(0, 1, 0, 0, 200, 200)
'    'Carico Foto

    Dim img As B4XBitmap = xui.LoadBitmapResize(File.DirAssets, splitta(1)&".jpg", 200dip, 150dip, True)
    Dim photo As ImageView
    photo.Initialize("")
    photo.Bitmap = CreateRoundRectBitmap(img, 20dip)
    p.AddView(photo, 0,0, 200, 150)
    'Carico Title Marker
    Dim lbl As TextView
    lbl.Initialize("")
    'lbl.Text = SelectedMarker.Title
    lbl.Text = splitta(0)
    lbl.TextColor = Colors.Black
   
    p.AddView(lbl, 10, photo.Height, 200, 80)
    Return p
End Sub



Private Sub Page1_Resize(Width As Int, Height As Int)
    If gmap.IsInitialized Then gmap.SetLayoutAnimated(0, 1, 0, 0, Width, Height)
End Sub

Sub gmap_CameraChange (Position As CameraPosition)
    MapScale1.Update(Position.Zoom, Position.Target.Latitude)
    CameraChangedIndex = CameraChangedIndex + 1
    Dim MyIndex As Int = CameraChangedIndex
    Sleep(200)
    If MyIndex = CameraChangedIndex Then
        Log("Finished moving for now!")
    End If
End Sub


Sub gmap_MarkerClick (SelectedMarker As Marker) As Boolean 'Return True to consume the click
    Dim ngm As NativeObject = gmap
    Dim infoWindowVisible As Boolean = True
    If ngm.GetField("selectedMarker").IsInitialized Then
        Dim current As Marker = ngm.GetField("selectedMarker")
        If current.Title = SelectedMarker.Title Then infoWindowVisible = False
    End If
    If infoWindowVisible Then
        Log("Snippet is shown")
    Else
        Log("Snippet is hidden")
    End If
    Return False
End Sub

A nice day with B4X
Also this sample works on iOS, but in B4a this form is showd inside a Infowindow... so the problem is the same. :(
 

MarcoRome

Expert
Licensed User
Longtime User
Also this sample works on iOS, but in B4a this form is showd inside a Infowindow... so the problem is the same. :(
Nicolas as write #1 Post "can also be extended to B4A and B4J".
Here a little, dirty and fast example in B4A with Infowindow

You have this effect:

1597248678230.png


Library GoogleMaps , GoogleMapsExtras, JavaObject, xui view, RuntimePermission, ( if you want maps without Poi )

B4X:
Sub Process_Globals
    Private rp As RuntimePermissions
End Sub

Sub Globals
    Private gmap As GoogleMap
    Private MapFragment1 As MapFragment
    Dim xui As XUI
    Dim InfoWindowPanel As Panel
    Dim gextra As GoogleMapsExtras
    Dim MapPanel As Panel
    Private Label1 As Label
    Private ImageView1 As ImageView
End Sub


Sub InfoWindowAdapter1_GetInfoContents(Marker1 As Marker) As View

    '   the default InfoContent will be used if this event Sub is not defined or if it returns Null
    Log("InfoWindowAdapter1_GetInfoContents")
    
    Dim splitta() As String = Regex.Split("\|", Marker1.Title)
    
    Label1.Width = 120dip
    Label1.Text = splitta(0)
    
    Dim img As B4XBitmap = xui.LoadBitmapResize(File.DirAssets, splitta(1)&".jpg", 60dip, 60dip, True)
    ImageView1.Bitmap = img 
  
    Return InfoWindowPanel
End Sub

Sub Activity_Create(FirstTime As Boolean)
    Activity.LoadLayout("1")
    
    If MapFragment1.IsGooglePlayServicesAvailable = False Then
        ToastMessageShow("Google Play services not available.", True)
    Else
        MapFragment1.Initialize("MapFragment1", MapPanel)
    End If
    
    
    Wait For MapFragment1_Ready
    gmap = MapFragment1.GetMap
    rp.CheckAndRequest(rp.PERMISSION_ACCESS_FINE_LOCATION)
    Wait For Activity_PermissionResult (Permission As String, Result As Boolean)
    If Result Then
        gmap.MyLocationEnabled = True
    
        '***For Photo & Text
        Dim GoogleMapsExtras1 As GoogleMapsExtras
        Dim InfoWindowAdapter1 As InfoWindowAdapter
              
        InfoWindowAdapter1.Initialize("InfoWindowAdapter1")
        GoogleMapsExtras1.SetInfoWindowAdapter(gmap, InfoWindowAdapter1)
      
                
        InfoWindowPanel.Initialize("InfoWindowPanel")
        InfoWindowPanel.LoadLayout("lay_info")

        'a hack(ish) way to set InfoWindowPanel width and height!
        MapPanel.AddView(InfoWindowPanel, 0, 0, 200dip, 60dip)
        InfoWindowPanel.RemoveView
    
        'Click  Photo & Text
        Dim icl As OnInfoWindowClickListener
        icl.Initialize("InfoWindowClick")
        gextra.SetOnInfoWindowClickListener(gmap, icl)
        '***End Photo & Text
    
            
    'Type Maps
    gmap.MapType = gmap.MAP_TYPE_NORMAL
    
    'Get lat e lon 
    Do While gmap.MyLocation.IsInitialized = False
        Sleep(500)
    Loop
    
    
    'Zoom Map
    Dim cp As CameraPosition
    'cp.Initialize(gmap.MyLocation.Latitude, gmap.MyLocation.Longitude, 18)
    cp.Initialize(37.098396, 13.928318, 14)
    gmap.AnimateCamera(cp)
    
    'Add Marker
    gmap.AddMarker3(37.098396, 13.928318, $"Baia del Pirata${CRLF}Offerta Speciale|baia0"$,  LoadBitmap(File.DirAssets, "sailing.png"))
    gmap.AddMarker3(37.099458, 13.921323, "Baia Roccella|baia1", LoadBitmap(File.DirAssets, "scubadiving.png"))
    gmap.AddMarker3(37.097489, 13.913918, "Baia della Dama|baia2", LoadBitmap(File.DirAssets, "scubadiving.png"))
    

   'IF YOU WANT YOU CAN AVOID EXIST POI
    Dim jo As JavaObject = gmap
    Dim style As JavaObject
        style.InitializeNewInstance("com.google.android.gms.maps.model.MapStyleOptions", Array($"[
  {
    "featureType": "administrative",
    "elementType": "geometry",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "poi",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "road",
    "elementType": "labels.icon",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  },
  {
    "featureType": "transit",
    "stylers": [
      {
        "visibility": "off"
      }
    ]
  }
]"$))
    Log(jo.RunMethod("setMapStyle", Array(style))) 'returns True if successful
   
    Else
        Log("No permission!")
    End If
End Sub
 

Nicolás Cieri

Active Member
Licensed User
Thanks Marco,

But even in your example, the typical infowindow is visible.

What I require is that this infowindow is not visible and that the panel looks like flying, by itself.

In other words, the traditional infowindow looks transparent.
 

Nicolás Cieri

Active Member
Licensed User
Thanks.

Yes, I got to the same links, I have already reviewed all of them, but I have not been able to implement it in "B4A"
 

TILogistic

Expert
Licensed User
Longtime User
What I understand you want to make a custom and transparent InfoWindow?

like this kind of customizations:


 
Last edited:
Top