Place Markers कॉम्पोनेंट

जगह के मार्कर कॉम्पोनेंट की मदद से, मैप के एनोटेशन को पसंद के मुताबिक बनाया जा सकता है. इससे जगह की अहम जानकारी सीधे तौर पर मैप पर दिखती है. जगह की रेटिंग, जगह का टाइप, खुली है या बंद है, कीमत सीमा या कस्टम टेक्स्ट (उदाहरण के लिए, एआई से जनरेट किया गया लेबल या यात्रा का नंबर) जैसे कॉन्टेंट को दिखाया जा सकता है. इससे आपके उपयोगकर्ताओं को मैप एक्सप्लोर करने का बेहतर अनुभव मिलता है. इसके लिए, उन्हें किसी जगह की ज़्यादा जानकारी वाले कार्ड पर टैप करने की ज़रूरत नहीं होती.

जगह के मार्कर के लिए उपलब्ध आइकॉन और टेक्स्ट

हर PlaceMarker के लिए, एक मार्कर आइकॉन और मार्कर का टेक्स्ट दिखाया जा सकता है. मार्कर का टेक्स्ट दिखाना ज़रूरी नहीं है.

ये आइकॉन उपलब्ध हैं:

  • type: जगह का टाइप.
  • none: कोई आइकॉन नहीं.
ये टेक्स्ट मार्कर उपलब्ध हैं:
  • rating: रेटिंग स्कोर.
  • priceRange: कीमत सीमा (उदाहरण के लिए, 1,000 से 2,000 रुपये).
  • openStatus: कारोबार खुला है या बंद है.
  • custom: कस्टम टेक्स्ट (उदाहरण के लिए, "POPULAR").

जगह की जानकारी देने के लिए, जगह का आईडी (.placeID), संसाधन का नाम (.resourceName) या भौगोलिक निर्देशांक (.coordinate) का इस्तेमाल करें.

विज्ञापन दिखाने और एट्रिब्यूशन से जुड़ी ज़रूरी शर्तें

Places UI Kit के मैप मार्कर दिखाए जाने पर, मार्कर अलग से नहीं दिखने चाहिए. इनमें इंटरैक्टिविटी होनी चाहिए. साथ ही, क्लिक या टैप करने पर, इनसे जुड़ी जगह की जानकारी देने वाला कॉम्पोनेंट या लाइटबॉक्स खुलना चाहिए. इससे Google की ब्रैंडिंग, योगदान देने वाले व्यक्ति को एट्रिब्यूशन, और समस्या की शिकायत करने की सुविधा मिल पाएगी.

अगर जगह कम है, तो फ़ोटो और समीक्षाओं के एट्रिब्यूशन से जुड़ी हमारी ज़रूरी शर्तें देखें.

जगह के मार्कर के उदाहरण

मार्कर को बुनियादी तौर पर पसंद के मुताबिक बनाना

यहां दिए गए कोड के उदाहरण में, प्लेस मार्कर को पसंद के मुताबिक बनाने के बारे में बुनियादी जानकारी दी गई है.

Swift

import GooglePlacesSwift
import SwiftUI

@MainActor
struct DefaultMarker: View {
  var body: some View {
    PlaceMarker(
      identifier: PlaceIdentifier.placeID("PLACE_ID"),
      markerIcon: .none
    )
  }
}

@MainActor
struct RatingMarker: View {
  var body: some View {
    PlaceMarker(
      identifier: PlaceIdentifier.placeID("PLACE_ID"),
      markerIcon: .none,
      markerText: .rating
    )
  }
}

@MainActor
struct TypeAndRatingMarker: View {
  var body: some View {
    PlaceMarker(
      identifier: PlaceIdentifier.placeID("PLACE_ID"),
      markerIcon: .type,
      markerText: .rating
    )
  }
}


@MainActor
struct PriceRangeMarker: View {
  var body: some View {
    PlaceMarker(
      identifier: PlaceIdentifier.resourceName("places/PLACE_RESOURCE_NAME"),
      markerIcon: .none,
      markerType: .priceRange
    )
  }
}


@MainActor
struct OpenStatusMarker: View {
  var body: some View {
    PlaceMarker(
      identifier: PlaceIdentifier.coordinate(CLLocationCoordinate2D(latitude: 37.7749, longitude: -122.4194)),
      markerIcon: .icon,
      markerText: .openStatus
    )
  }
}
@MainActor
struct PhotoMarker: View {
    PlaceMarker(
        identifier: PlaceIdentifier.resourceName("places/PLACE_RESOURCE_NAME")
        markerIcon =.Photo
    )
}


@MainActor
struct CustomMarker: View {
  var body: some View {
    PlaceMarker(
      identifier: PlaceIdentifier.placeID("PLACE_ID"),
      markerIcon: .none,
      markerType: .custom(label: "3")
    )
  }
}

मार्कर के दिखने के तरीके को पसंद के मुताबिक बनाना

यहां दिए गए कोड के उदाहरण में, SwiftUI के व्यू मॉडिफ़ायर का इस्तेमाल करके मार्कर के दिखने के तरीके को पसंद के मुताबिक बनाने का तरीका बताया गया है. इसके लिए, त्रिकोणीय स्पीच बबल बीक को छिपाया जाता है. साथ ही, जब उपयोगकर्ता मार्कर पर टैप करता है, तब ऐप्लिकेशन की कस्टम कार्रवाइयों को ट्रिगर करने के लिए टैप कॉलबैक दिया जाता है.

Swift

@MainActor
struct ModifierStyleMarker: View {
  var body: some View {
    PlaceMarker(
      identifier: .placeID("PLACE_ID"),
      markerIcon: .none,
      markerText: .openStatus,
      configuration: PlaceMarkerConfiguration(beakPresence: false)
    )
    .onTap { placeID in
      print("Marker tapped for place: \(placeID)")
    }
  }
}

कॉलबैक मैनेज करना

यहां दिए गए कोड के उदाहरण में बताया गया है कि रेंडरिंग पूरी होने या डेटा मौजूद न होने से जुड़ी गड़बड़ियों को ठीक करने के लिए, कॉलबैक का इस्तेमाल कैसे किया जाता है.

Swift

import GooglePlacesSwift
import SwiftUI


@MainActor
struct StatusHandlingMarker: View {
  var body: some View {
    PlaceMarker(
      identifier: PlaceIdentifier.placeID("PLACE_ID"),
      markerIcon: .none
      markerText: .priceRange,
    )
    /// Triggered when place data is successfully fetched or when data fetching fails or 
    /// required data is missing for the place..
    .onLoad { result in
        if let place = result.place {
          print("Marker successfully loaded for place ID: \(place.placeID)")
        } else if let error = result.error {
          print("Failed to load marker: \(error)")
      }
    }
  }
}

Maps SDK के साथ इंटिग्रेट करना

यहां दिए गए कोड के उदाहरण में, PlaceMarkerHostingView हेल्पर क्लास का इस्तेमाल करके PlaceMarker, Google Maps SDK for iOS GMSMarker में PlaceMarker को एम्बेड करने का तरीका बताया गया है.

Swift

import GoogleMaps
import GooglePlacesSwift
import SwiftUI
import UIKit


func addPlaceMarker(to mapView: GMSMapView, placeID: String) {
  let marker = GMSMarker()
  let markerView = PlaceMarker(
    identifier: .placeID(placeID),
    markerType: .rating(showIcon: true),
  ).onLoad { result in
    switch Result
    case .success(let place)
      marker.position = place.coordinate
    case .error(let error) {
      print("Failed to load marker: \(error)")
    }
  }

  marker.iconView = PlaceMakerHostingView(markerView)
  marker.map = mapView
}