How to draw a custom map on Android?

2 years ago
Noah Thompson
5 minutes

In Android, you can use the Google Maps API to create custom maps. Below are some steps: 1. Add Google Maps dependencies in the project’s build.gradle file.

implementation 'com.google.android.gms:play-services-maps:17.0.0'

Add a MapView element to your layout file to display the map.

<com.google.android.gms.maps.MapView
android:id="@+id/mapView"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

Get a reference to MapView in your Activity or Fragment.

private MapView mapView;
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    
    mapView = findViewById(R.id.mapView);
    mapView.onCreate(savedInstanceState);
}
@Override
public void onResume() {
    super.onResume();
    mapView.onResume();
}
@Override
public void onPause() {
    super.onPause();
    mapView.onPause();
}
@Override
public void onDestroy() {
    super.onDestroy();
    mapView.onDestroy();
}

4. Call the mapView.onResume() method in onResume() and the mapView.onPause() method in onPause().
5. Initialize the map and add custom markers in the onCreateOptionsMenu() method.

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.menu_main, menu);
    
    mapView.getMapAsync(new OnMapReadyCallback() {
        @Override
        public void onMapReady(GoogleMap googleMap) {
            // 在地图上添加标记
            LatLng position = new LatLng(37.4219999, -122.0840575);
            MarkerOptions markerOptions = new MarkerOptions()
                    .position(position)
                    .title("Custom Marker");
            googleMap.addMarker(markerOptions);
            
            // 设置自定义地图样式
            googleMap.setMapStyle(MapStyleOptions.loadRawResourceStyle(MainActivity.this, 
            R.raw.map_style));
            
            // 移动地图视角到标记位置
            googleMap.moveCamera(CameraUpdateFactory.newLatLng(position));
            googleMap.animateCamera(CameraUpdateFactory.zoomTo(12));
        }
    });
    
    return true;
}

One option:
6. Create a file named map_style.json, which is a custom map style in JSON format, where you can define the colors and styles of different elements. Place this file in the res/raw directory.

{
  "version": "1",
  "settings": {
    "mapToolbarEnabled": false,
    "compassEnabled": true,
    "rotateGesturesEnabled": true,
    "tiltGesturesEnabled": false,
    "zoomGesturesEnabled": true,
    "zoomControlsEnabled": false,
    "myLocationButtonEnabled": false
  },
  "elements": {
    "geometry": {
      "strokeColor": "#FF0000",
      "fillColor": "#88000000",
      "strokeWidth": 1
    },
    "labels": {
      "textColor": "#000000",
      "textSize": 12,
      "strokeColor": "#ffffff",
      "strokeWidth": 1
    },
    "icons": {
      "anchor": {
        "x": 0.5,
        "y": 0.5
      },
      "scale": 1
    }
  }
}

To run the application, you will see a custom map with its markers. Please note that in order to use the Google Maps API, you need to create a project on the Google Developer Console and enable the Google Maps API for it. You also need to add the Google Maps API key in the AndroidManifest.xml file.

<meta-data
android:name="com.google.android.geo.API_KEY"
    android:value="YOUR_API_KEY" />

In the code above, replace YOUR_API_KEY with the API key you obtained from the Google Developer Console. These are the basic steps to draw a custom map in Android. You can customize the map style and markers according to your own needs.

bannerAds