Integrating Maps in Mobile Applications

📘 Chapter 2: Setting Up Maps on Android and iOS

🔍 Overview

Integrating maps into your mobile application requires proper setup of SDKs, API keys, platform-specific configurations, and runtime permissions. Whether you're using Google Maps on Android, MapKit on iOS, or a cross-platform tool like Mapbox, this foundational step ensures your app can render maps, show user location, and enable map-based interactions.

This chapter walks you through:

• SDK setup and configuration for Android and iOS
• API key management
• Setting up map views in XML and SwiftUI
• Enabling location access with runtime permissions
• Initial map rendering and marker placement
• Troubleshooting common setup errors

📱 1. Getting Started with Google Maps SDK on Android

✅ Step 1: Create a Google Cloud Project and API Key

1. Go to console.cloud.google.com
2. Create a new project
3. Enable Maps SDK for Android
4. Generate an API key
5. Restrict your API key to:
• Android apps (package name + SHA-1)
• Specific APIs (Maps SDK only)

✅ Step 2: Add Dependencies in build.gradle

gradle

dependencies {

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

}

In build.gradle (project):

gradle

buildscript {

    repositories {

        google()

    }

}

✅ Step 3: Update AndroidManifest.xml

xml

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>

<application>

    <meta-data

        android:name="com.google.android.geo.API_KEY"

        android:value="@string/google_maps_key"/>

</application>

Store your API key in res/values/strings.xml:

xml

<string name="google_maps_key">YOUR_API_KEY</string>

✅ Step 4: Add Map to Activity Layout

xml

<fragment

    android:id="@+id/map_fragment"

    android:name="com.google.android.gms.maps.SupportMapFragment"

    android:layout_width="match_parent"

    android:layout_height="match_parent"/>

✅ Step 5: Load Map in Kotlin Activity

kotlin

class MainActivity : AppCompatActivity(), OnMapReadyCallback {

    private lateinit var mMap: GoogleMap

    override fun onCreate(savedInstanceState: Bundle?) {

        super.onCreate(savedInstanceState)

        setContentView(R.layout.activity_main)

        val mapFragment = supportFragmentManager

            .findFragmentById(R.id.map_fragment) as SupportMapFragment

        mapFragment.getMapAsync(this)

    }

    override fun onMapReady(googleMap: GoogleMap) {

        mMap = googleMap

        val location = LatLng(37.7749, -122.4194)

        mMap.addMarker(MarkerOptions().position(location).title("San Francisco"))

        mMap.moveCamera(CameraUpdateFactory.newLatLngZoom(location, 12f))

    }

}

🍏 2. Setting Up Apple MapKit on iOS

✅ Step 1: Add MapKit and CoreLocation Frameworks

In Xcode:

• Go to project settings → General → Frameworks, Libraries, and Embedded Content
• Add MapKit.framework and CoreLocation.framework

✅ Step 2: Request Location Permissions in Info.plist

xml

<key>NSLocationWhenInUseUsageDescription</key>

<string>We need your location to show nearby places.</string>

✅ Step 3: Add MapView in SwiftUI or Storyboard

SwiftUI Example:

swift

import SwiftUI

import MapKit

struct ContentView: View {

    @State private var region = MKCoordinateRegion(

        center: CLLocationCoordinate2D(latitude: 40.7128, longitude: -74.0060),

        span: MKCoordinateSpan(latitudeDelta: 0.05, longitudeDelta: 0.05)

    )

    var body: some View {

        Map(coordinateRegion: $region)

            .edgesIgnoringSafeArea(.all)

    }

}

UIKit Example:

swift

import UIKit

import MapKit

class ViewController: UIViewController {

    override func viewDidLoad() {

        super.viewDidLoad()

        let mapView = MKMapView(frame: self.view.frame)

        let coordinate = CLLocationCoordinate2D(latitude: 34.0522, longitude: -118.2437)

        let annotation = MKPointAnnotation()

        annotation.coordinate = coordinate

        annotation.title = "Los Angeles"

        mapView.addAnnotation(annotation)

        mapView.setRegion(MKCoordinateRegion(center: coordinate, span: MKCoordinateSpan(latitudeDelta: 0.1, longitudeDelta: 0.1)), animated: true)

        self.view.addSubview(mapView)

    }

}

🧩 3. Handling Location Permissions at Runtime

✅ Android (Kotlin):

kotlin

ActivityCompat.requestPermissions(this,

    arrayOf(Manifest.permission.ACCESS_FINE_LOCATION), 1)

Check permission:

kotlin

if (ContextCompat.checkSelfPermission(this, Manifest.permission.ACCESS_FINE_LOCATION)

    == PackageManager.PERMISSION_GRANTED) {

    mMap.isMyLocationEnabled = true

}

✅ iOS (Swift):

swift

import CoreLocation

class LocationManager: NSObject, CLLocationManagerDelegate {

    let manager = CLLocationManager()

    func requestPermission() {

        manager.requestWhenInUseAuthorization()

    }

}

Check authorization status:

swift

if CLLocationManager.authorizationStatus() == .authorizedWhenInUse {

    mapView.showsUserLocation = true

}

🔍 4. Testing on Simulators and Devices

🧪 5. Troubleshooting Setup Errors

📌 Best Practices

• Always check if location services are enabled
• Wrap permission checks in helper functions for reuse
• Use Lifecycle-aware components (ViewModel, ActivityResult API)
• Handle permission denial gracefully
• Keep maps responsive with CameraUpdateFactory (Android) and MKMapCamera (iOS)

📊 Table: SDK Setup Summary

📌 Conclusion

Once the map SDKs are properly set up on Android and iOS, you’ll be ready to build interactive, location-rich features like live tracking, geofencing, and navigation. Setting up maps requires more than visuals—it includes permissions, performance considerations, and configuration that align with best practices across both platforms.