Gallery
Share
Explore

Requirement 3 App Architecture

⁠
⁠
⁠

Get the code for this project here:
https://www.dropbox.com/scl/fi/oxt6dgwoj003bzbft5nya/Maps-with-Markers-clicking-on-map-and-enter-coordinates.zip?rlkey=pywmf1lmu5xv61djidockje8q&st=9x9i9to6&dl=0
⁠
⁠

Requirement 3: Tap the Map to Drop a Marker with Annotations

Users tap anywhere on the map to add a marker.
A dialog box prompts the user to enter a custom annotation.
The marker shows:
Coordinates of the tap.
User-entered annotation.
Markers are cumulative, and all remain visible.

Lecture Slides for Requirement 3: Tap the Map to Drop a Marker with User Annotations

Let’s dive into how we can dynamically place markers on a map by tapping it. Together, we’re unlocking the full power of user interaction with Google Maps. Markers aren’t just coordinates anymore—they’ll include custom notes that we can add in real time. All previous markers remain, and the app becomes a visual diary of user interactions.
⁠

Slide 1: What Are We Building?

Title: Requirement 3: Tap to Drop Markers with Annotations
What We’re Delivering:
Users can tap anywhere on the map to drop a marker.
Each marker will include:
Coordinates (latitude, longitude)
A user-entered note (annotation)
All markers are cumulative—previous markers remain on the map.
Why This Is Cool: We’re building a fully interactive map that evolves with the user. This feature ties everything we’ve learned so far into a seamless experience.
⁠

Slide 2: How Tapping the Map Works

Title: What Happens When We Tap the Map?
User Interaction:
A tap on the map sends the coordinates (latitude and longitude).
The app listens for this tap and triggers a response.
App Response:
The coordinates are passed into a dialog box where the user can enter a note.
The app saves the marker, adds it to the map, and ensures it persists.
Result:
The map accumulates markers, each containing unique information provided by the user.
⁠

Slide 3: The Workflow in Action

Title: Understanding the Flow
Tap the Map:
The app detects where we tap.
Dialog Box Appears:
A text input field allows us to provide a note for the marker.
Place the Marker:
The app places a marker with:
The coordinates (latitude and longitude).
The user-entered annotation.
Markers Accumulate:
Every marker stays visible as new ones are added.
This feature makes our map dynamic and personalized, allowing us to make the map our own.
⁠

Slide 4: Adding a Listener for Taps

Title: The Code for Detecting Taps
In onMapReady, we set up a listener to detect taps:
googleMap.setOnMapClickListener { latLng ->
showAnnotationDialog(latLng)
}

Key Points:
setOnMapClickListener: Google Maps SDK method for listening to taps.
latLng: The exact location of the tap (latitude, longitude).
Next Step: Pass the tapped location to a dialog box for user input.
⁠

Slide 5: Prompting for Annotations

Title: Asking the User for Notes
When the map is tapped, we open a dialog for user input. Here’s how we implement it:
private fun showAnnotationDialog(latLng: LatLng) {
val builder = AlertDialog.Builder(this)
builder.setTitle("Add a Note for Your Marker")

val input = EditText(this)
input.hint = "Enter your note"
builder.setView(input)

builder.setPositiveButton("Add Marker") { _, _ ->
val annotation = input.text.toString()
addMarker(latLng, annotation)
}

builder.setNegativeButton("Cancel") { dialog, _ ->
dialog.dismiss()
}

builder.show()
}

Key Points:
A dialog box appears, prompting the user for a note.
Clicking "Add Marker" places a marker with the note.
Clicking "Cancel" dismisses the dialog.
This ensures that we have complete control over marker customization.
⁠

Slide 6: Placing the Marker

Title: Adding the Marker with Annotations
Here’s the function that adds a marker based on user input:
private fun addMarker(latLng: LatLng, annotation: String) {
val markerOptions = MarkerOptions()
.position(latLng)
.title("Marker at ${latLng.latitude}, ${latLng.longitude}")
.snippet(annotation)

googleMap.addMarker(markerOptions)

// Update the message on the UI
binding.tvMessage.text = "Marker added at ${latLng.latitude}, ${latLng.longitude}"
}

What We’re Doing Here:
Position: The marker is placed at the tapped location.
Title: The marker displays the coordinates.
Snippet: The user’s note appears below the title.
⁠

Slide 7: Cumulative Markers

Title: How Markers Persist on the Map
What We’ve Achieved:
Every marker is added using googleMap.addMarker().
Google Maps automatically ensures markers stay visible until the map is cleared.
Result: Our app allows users to build a map history, adding as many markers as they want.
⁠

Slide 8: Full MainActivity.kt Code

Title: Our Updated Kotlin Code
package com.example.locationservicesnov24

import android.os.Bundle
import android.widget.EditText
import android.widget.Toast
import androidx.appcompat.app.AlertDialog
import androidx.appcompat.app.AppCompatActivity
import com.example.locationservicesnov24.databinding.ActivityMainBinding
import com.google.android.gms.maps.CameraUpdateFactory
import com.google.android.gms.maps.GoogleMap
import com.google.android.gms.maps.OnMapReadyCallback
import com.google.android.gms.maps.model.LatLng
import com.google.android.gms.maps.model.MarkerOptions

class MainActivity : AppCompatActivity(), OnMapReadyCallback {

private lateinit var binding: ActivityMainBinding
private lateinit var googleMap: GoogleMap

override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)

// Initialize View Binding
binding = ActivityMainBinding.inflate(layoutInflater)
setContentView(binding.root)

// Initialize map fragment via View Binding
val mapFragment = binding.mapFragmentContainer.getFragment<SupportMapFragment>()
mapFragment.getMapAsync(this)
}

override fun onMapReady(map: GoogleMap) {
googleMap = map

// Detect taps on the map
googleMap.setOnMapClickListener { latLng ->
showAnnotationDialog(latLng)
}
}

private fun showAnnotationDialog(latLng: LatLng) {
val builder = AlertDialog.Builder(this)
builder.setTitle("Add a Note for Your Marker")

val input = EditText(this)
input.hint = "Enter your note"
builder.setView(input)

builder.setPositiveButton("Add Marker") { _, _ ->
val annotation = input.text.toString()
addMarker(latLng, annotation)
}

builder.setNegativeButton("Cancel") { dialog, _ ->
dialog.dismiss()
}

builder.show()
}

private fun addMarker(latLng: LatLng, annotation: String) {
val markerOptions = MarkerOptions()
.position(latLng)
.title("Marker at ${latLng.latitude}, ${latLng.longitude}")
.snippet(annotation)

googleMap.addMarker(markerOptions)

// Update the message on the UI
binding.tvMessage.text = "Marker added at ${latLng.latitude}, ${latLng.longitude}"
}
}

⁠

Slide 9: How the Layers Connect

Title: A Recap of How It All Works
UI Layout (activity_main.xml):
Handles layout for the map, buttons, and message text.
Kotlin Code (MainActivity.kt):
Listens for taps, collects user input, and places markers dynamically.
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.