Android Tutorial (old) Google Maps Android v2 tutorial

Status
Not open for further replies.
If you are using B4A v5.80+ then please follow this tutorial: https://www.b4x.com/android/forum/threads/google-maps.63930/#post-404386

GoogleMaps library requires v2.50 or above.

GoogleMaps library allows you to add Google maps to your application. This library requires Android 3+ and will only work on devices with Google Play service.

This tutorial will cover the configuration steps required for showing a map.

1. Download Google Play services - From the IDE choose Run AVD Manager and then choose Tools - SDK Manager. Select Google Play services under the Extras node and install it:

SS-2012-12-18_18.28.04.png


2. Copy google-play-services.jar to the libraries folder - This file is available under:
C:\<android sdk>\extras\google\google_play_services\libproject\google-play-services_lib\libs (ignore the extra space that the forum script insists on adding)
You should copy it to the libraries folder.

2.5. Download the attached library, unzip it and copy to the libraries folder.

3. Find the key signature - Your application must be signed with a private key other than the debug key. After you select a new or existing key file (Tools - Private Sign Key) you should reopen the private key dialog. The signature information will be displayed (increase the dialog size as needed).
The value after SHA1 is required for the next step:

SS-2012-12-18_18.11.34.png


4. Create an API project - Follow these steps and create an API project.
You should follow the steps under "Creating an API Project" and "Obtaining an API key".

Tips:
- Make sure to select "Google Maps Android API v2" in the services list and not one of the other similar services.
- Under "Simple API Access" you should select "Key for Android apps (with certificates".

5. Add the following code to the manifest editor:
B4X:
AddManifestText( <permission
          android:name="$PACKAGE$.permission.MAPS_RECEIVE"
          android:protectionLevel="signature"/>
      <uses-feature android:glEsVersion="0x00020000" android:required="true"/>)

AddApplicationText(<meta-data
    android:name="com.google.android.maps.v2.API_KEY"
    android:value="AIzaSyCzspmxxxxxxxxxxxxx"/>
<meta-data android:name="com.google.android.gms.version"
android:value="@integer/google_play_services_version"
    />)
AddPermission(android.permission.ACCESS_NETWORK_STATE)
You should replace the value after android:value with the key you received in the previous step.

6. Add an #AdditionalRes attribute to the main activity:

You should add a reference to Google play resources by adding the following line:
B4X:
#AdditionalRes: <google-play-services res folder>, com.google.android.gms
For example:

#AdditionalRes: C:\android-sdk-windows\extras\google\google_play_services\libproject\google-play-services_lib\res, com.google.android.gms

Run the following code:
B4X:
'Activity module
Sub Process_Globals

End Sub

Sub Globals
   Dim mFragment As MapFragment
   Dim gmap As GoogleMap
   Dim MapPanel As Panel
End Sub

Sub Activity_Create(FirstTime As Boolean)
   MapPanel.Initialize("")
   Activity.AddView(MapPanel, 0, 0, 100%x, 100%y)
   If mFragment.IsGooglePlayServicesAvailable = False Then
      ToastMessageShow("Google Play services not available.", True)
   Else
      mFragment.Initialize("Map", MapPanel)
   End If
End Sub
Sub Map_Ready
   Log("map ready")
   gmap = mFragment.GetMap
   If gmap.IsInitialized = False Then
      ToastMessageShow("Error initializing map.", True)
   Else
      gmap.AddMarker(36, 15, "Hello!!!")
      Dim cp As CameraPosition
      cp.Initialize(36, 15, gmap.CameraPosition.Zoom)
      gmap.AnimateCamera(cp)
   End If
End Sub

You should see:

SS-2012-12-18_18.25.14.png


If you see a "white map" then there is most probably a mismatch between the: package name, sign key and the API key (from the manifest editor).

Google documentation: https://developers.google.com/maps/documentation/android/intro
Note that there is a required attribution which you must include in your app (see above link). You can get the string by calling MapFragment.GetOpenSourceSoftwareLicenseInfo.

V1.01: Fixes a bug in AddMarker2.
 

Attachments

  • GoogleMaps.zip
    17.8 KB · Views: 11,581
Last edited:

Roberto P.

Well-Known Member
Licensed User
Longtime User
I followed all the steps provided for in the tutorial, but I get this error: someone can tell me where I'm wrong?
Thank you


upload_2015-10-15_16-28-0.png



#AdditionalJar: google-play-services.jar
#AdditionalRes: C:\Android\Developer_Android\SDK\sdk\extras\google\google_play_services\libproject\google-play-services_lib\res, com.google.android.gms

AddManifestText( <permission
android:name="$PACKAGE$.permission.MAPS_RECEIVE"
android:protectionLevel="signature"/>
<uses-feature android:glEsVersion="0x00020000" android:required="true"/>)


SetApplicationAttribute(android:icon, "@drawable/icon")
SetApplicationAttribute(android:label, "$LABEL$")


AddApplicationText(<meta-data
android:name="com.google.android.maps.v2.API_KEY"
android:value="AIzaSyCZuo2DyWX-----------------------removed--------------"/>)
 

Roberto P.

Well-Known Member
Licensed User
Longtime User
I solved!

if it helps: code to the manifest editor for the version of B4A B4A prior to V3.20.

I inserted the new code and everything works.
Thank you
 
Last edited:

Roberto P.

Well-Known Member
Licensed User
Longtime User
now it works! I have to see the data ...

I can transform an address in geographical coordinate or is there a way to display an address?

E 'can view a route? In practice, given a set of addresses, it is possible to create the path to follow?

Thank you
 

SCIS

Active Member
Licensed User
Longtime User
Hi,

I have 2 problems:

1.Our project shows a map when I'm debugging from my laptop but not when I'm debugging from my desktop. I've no idea why this is a problem.
2. The times our map does show up, it is in a low resolution so it doesn't look nice.

How should I fix this?
 

warwound

Expert
Licensed User
Longtime User
Our project shows a map when I'm debugging from my laptop but not when I'm debugging from my desktop. I've no idea why this is a problem.

You've created an API key using a keystore that is on your laptop but not your desktop.
API keys are tied to a single keystore, and are not valid when your app has not been compiled with that keystore.
 

SCIS

Active Member
Licensed User
Longtime User
You've created an API key using a keystore that is on your laptop but not your desktop.
API keys are tied to a single keystore, and are not valid when your app has not been compiled with that keystore.

I don't really understand because I always upload the keystore in the zip of the project aswell. How can I tie the API key to the right keystore?
 

warwound

Expert
Licensed User
Longtime User
On your laptop you must (in theory) be using the keystore that you used to obtain your API key.
Look under Tools menu > Private Sign Key.

Copy this keystore file to your desktop if it doesn't already exist on your desktop.
Now in b4a on your desktop open Tools menu > Private Sign Key and browse to the keystore file.
Now recompile and test...
 

SCIS

Active Member
Licensed User
Longtime User
On your laptop you must (in theory) be using the keystore that you used to obtain your API key.
Look under Tools menu > Private Sign Key.

Copy this keystore file to your desktop if it doesn't already exist on your desktop.
Now in b4a on your desktop open Tools menu > Private Sign Key and browse to the keystore file.
Now recompile and test...

It works now, thanks alot! I always pressed the button "use this debug key" instead of "ok".

Do you maybe have an idea what the resolution problem could be? I've changed the standard MapPanel to a panel in a layout and in the designer script I have AutoScaleAll turned on. I've also tried to set the panel heigth to 100%y and the width to 100%x but this also didn't work.
 

warwound

Expert
Licensed User
Longtime User
Do you maybe have an idea what the resolution problem could be? I've changed the standard MapPanel to a panel in a layout and in the designer script I have AutoScaleAll turned on. I've also tried to set the panel heigth to 100%y and the width to 100%x but this also didn't work.

GoogleMap should display properly on devices with any screen density - in theory.
What device are you testing it on and what is that device's screen density?

If you're using your own map tiles - from a custom tile server - then there may be problems where the tiles do not scale very well to the device's density.
Are you using GoogleMap's built in tile layers (road map, satellite etc) or your own tiles?

Can you post a screengrab of the blurry map?
 

SCIS

Active Member
Licensed User
Longtime User
GoogleMap should display properly on devices with any screen density - in theory.
What device are you testing it on and what is that device's screen density?

If you're using your own map tiles - from a custom tile server - then there may be problems where the tiles do not scale very well to the device's density.
Are you using GoogleMap's built in tile layers (road map, satellite etc) or your own tiles?

Can you post a screengrab of the blurry map?

Using the OnePlus two but I just managed to solve it myself, made a stupid mistake...Thanks though!
I do have another question, for Travel directions, do I have to use polylines for that?
 

luke2012

Well-Known Member
Licensed User
Longtime User
Hi,
is it possible to change the marker icon or color (with this library or other extra libraries) ?
 
Status
Not open for further replies.
Top