मार्कर

प्लैटफ़ॉर्म चुनें: Android iOS JavaScript

मार्कर, मैप पर किसी एक जगह की जानकारी देते हैं.

डिफ़ॉल्ट रूप से, मार्कर में एक स्टैंडर्ड आइकॉन का इस्तेमाल होता है. यह आइकॉन, Google Maps के सामान्य आइकॉन जैसा ही दिखता है. अगर आपको मार्कर को पसंद के मुताबिक बनाना है, तो डिफ़ॉल्ट मार्कर का रंग बदला जा सकता है. इसके अलावा, मार्कर की इमेज को कस्टम आइकॉन से बदला जा सकता है या मार्कर की अन्य प्रॉपर्टी बदली जा सकती हैं.

मार्कर पर क्लिक इवेंट के जवाब में, जानकारी वाली विंडो खोली जा सकती है. जानकारी वाली विंडो, मार्कर के ऊपर डायलॉग विंडो में टेक्स्ट या इमेज दिखाती है. टेक्स्ट दिखाने के लिए, डिफ़ॉल्ट जानकारी वाली विंडो का इस्तेमाल किया जा सकता है. इसके अलावा, जानकारी वाली विंडो के कॉन्टेंट को पूरी तरह से कंट्रोल करने के लिए, अपनी पसंद के मुताबिक़ जानकारी वाली विंडो बनाई जा सकती है.

मार्कर जोड़ना

मार्कर जोड़ने के लिए, ऐसा GMSMarker ऑब्जेक्ट बनाएं जिसमें position और title शामिल हों. इसके बाद, उसका map सेट करें.

यहां दिए गए उदाहरण में, किसी मौजूदा GMSMapView ऑब्जेक्ट में मार्कर जोड़ने का तरीका बताया गया है. मार्कर, निर्देशांक 10,10 पर बनाया गया है. साथ ही, क्लिक करने पर जानकारी वाली विंडो में "नमस्ते दुनिया" स्ट्रिंग दिखती है.

Swift

let position = CLLocationCoordinate2D(latitude: 10, longitude: 10)
let marker = GMSMarker(position: position)
marker.title = "Hello World"
marker.map = mapView
      

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(10, 10);
GMSMarker *marker = [GMSMarker markerWithPosition:position];
marker.title = @"Hello World";
marker.map = mapView;
      

मैप में नए मार्कर जोड़ने के लिए ऐनिमेशन जोड़ा जा सकता है. इसके लिए, marker.appearAnimation प्रॉपर्टी को इनमें से किसी वैल्यू पर सेट करें:

• kGMSMarkerAnimationPop जोड़ने पर, मार्कर अपने groundAnchor से पॉप हो जाएगा.
• kGMSMarkerAnimationFadeIn जोड़ने पर मार्कर धीरे-धीरे दिखने लगे.

मार्कर हटाना

GMSMarker की map प्रॉपर्टी को nil पर सेट करके, मैप से मार्कर हटाया जा सकता है. इसके अलावा, GMSMapView clear तरीका इस्तेमाल करके, मैप पर मौजूद सभी ओवरले (मार्कर के साथ) हटाए जा सकते हैं.

Swift

let camera = GMSCameraPosition.camera(
  withLatitude: -33.8683,
  longitude: 151.2086,
  zoom: 6
)
let mapView = GMSMapView.map(withFrame: .zero, camera: camera)
// ...
mapView.clear()
      

Objective-C

GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.8683
                                                        longitude:151.2086
                                                             zoom:6];
mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
// ...
[mapView clear];
      

अगर आपको मैप में मार्कर जोड़ने के बाद उसमें बदलाव करने हैं, तो GMSMarker ऑब्जेक्ट को पकड़े रखें. इस ऑब्जेक्ट में बदलाव करके, मार्कर में बाद में बदलाव किया जा सकता है.

Swift

let position = CLLocationCoordinate2D(latitude: 10, longitude: 10)
let marker = GMSMarker(position: position)
marker.map = mapView
// ...
marker.map = nil
      

Objective-C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(10, 10);
GMSMarker *marker = [GMSMarker markerWithPosition:position];
marker.map = mapView;
// ...
marker.map = nil;
      

मार्कर का रंग बदलना

डिफ़ॉल्ट मार्कर इमेज के रंग को अपनी पसंद के मुताबिक बनाया जा सकता है. इसके लिए, markerImageWithColor: की मदद से डिफ़ॉल्ट आइकॉन के रंग में बदलाव करने का अनुरोध करें. इसके बाद, बदली गई इमेज को GMSMarker की आइकॉन प्रॉपर्टी में पास करें.

Swift

marker.icon = GMSMarker.markerImage(with: .black)
      

Objective-C

marker.icon = [GMSMarker markerImageWithColor:[UIColor blackColor]];
      

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

अगर आपको मार्कर की डिफ़ॉल्ट इमेज बदलनी है, तो मार्कर की icon या iconView प्रॉपर्टी का इस्तेमाल करके, कोई कस्टम आइकॉन सेट किया जा सकता है. अगर iconView सेट है, तो एपीआई icon प्रॉपर्टी को अनदेखा कर देता है.

मार्कर की icon प्रॉपर्टी का इस्तेमाल करना

यहां दिया गया स्निपेट, icon प्रॉपर्टी में UIImage के तौर पर दिए गए कस्टम आइकॉन के साथ मार्कर बनाता है. आइकॉन के बीच में इंग्लैंड का लंदन है. स्निपेट यह मानता है कि आपके ऐप्लिकेशन में "house.png" नाम की इमेज मौजूद है.

Swift

let positionLondon = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
let london = GMSMarker(position: positionLondon)
london.title = "London"
london.icon = UIImage(named: "house")
london.map = mapView
      

Objective-C

CLLocationCoordinate2D positionLondon = CLLocationCoordinate2DMake(51.5, -0.127);
GMSMarker *london = [GMSMarker markerWithPosition:positionLondon];
london.title = @"London";
london.icon = [UIImage imageNamed:@"house"];
london.map = mapView;
      

अगर एक ही इमेज का इस्तेमाल करके कई मार्कर बनाए जा रहे हैं, तो हर मार्कर के लिए UIImage के एक ही इंस्टेंस का इस्तेमाल करें. इससे कई मार्कर दिखाते समय, आपके ऐप्लिकेशन की परफ़ॉर्मेंस को बेहतर बनाने में मदद मिलती है.

इस इमेज में कई फ़्रेम हो सकते हैं. इसके अलावा, alignmentRectInsets प्रॉपर्टी का इस्तेमाल किया जाता है. यह तब काम आता है, जब मार्कर में कोई शैडो या ऐसा कोई क्षेत्र हो जिसका इस्तेमाल नहीं किया जा सकता.

मार्कर की iconView प्रॉपर्टी का इस्तेमाल करना

नीचे दिया गया स्निपेट, मार्कर की iconView प्रॉपर्टी को सेट करके, कस्टम आइकॉन वाला मार्कर बनाता है. साथ ही, मार्कर के रंग में बदलाव करके उसे ऐनिमेट करता है. स्निपेट यह मानता है कि आपके ऐप्लिकेशन में "house.png" नाम की इमेज है.

Swift

import CoreLocation
import GoogleMaps

class MarkerViewController: UIViewController, GMSMapViewDelegate {
  var mapView: GMSMapView!
  var london: GMSMarker?
  var londonView: UIImageView?

  override func viewDidLoad() {
    super.viewDidLoad()

    let camera = GMSCameraPosition.camera(
      withLatitude: 51.5,
      longitude: -0.127,
      zoom: 14
    )
    let mapView = GMSMapView.map(withFrame: .zero, camera: camera)
    view = mapView

    mapView.delegate = self

    let house = UIImage(named: "House")!.withRenderingMode(.alwaysTemplate)
    let markerView = UIImageView(image: house)
    markerView.tintColor = .red
    londonView = markerView

    let position = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
    let marker = GMSMarker(position: position)
    marker.title = "London"
    marker.iconView = markerView
    marker.tracksViewChanges = true
    marker.map = mapView
    london = marker
  }

  func mapView(_ mapView: GMSMapView, idleAt position: GMSCameraPosition) {
    UIView.animate(withDuration: 5.0, animations: { () -> Void in
      self.londonView?.tintColor = .blue
    }, completion: {(finished) in
      // Stop tracking view changes to allow CPU to idle.
      self.london?.tracksViewChanges = false
    })
  }
}
      

Objective-C

@import CoreLocation;
@import GoogleMaps;

@interface MarkerViewController : UIViewController <GMSMapViewDelegate>
@property (strong, nonatomic) GMSMapView *mapView;
@end

@implementation MarkerViewController {
  GMSMarker *_london;
  UIImageView *_londonView;
}

- (void)viewDidLoad {
  [super viewDidLoad];

  GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:51.5
                                                          longitude:-0.127
                                                               zoom:14];
  _mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
  self.view = _mapView;

  _mapView.delegate = self;

  UIImage *house = [UIImage imageNamed:@"House"];
  house = [house imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
  _londonView = [[UIImageView alloc] initWithImage:house];
  _londonView.tintColor = [UIColor redColor];

  CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127);
  _london = [GMSMarker markerWithPosition:position];
  _london.title = @"London";
  _london.iconView = _londonView;
  _london.tracksViewChanges = YES;
  _london.map = self.mapView;
}

- (void)mapView:(GMSMapView *)mapView idleAtCameraPosition:(GMSCameraPosition *)position {
  [UIView animateWithDuration:5.0
                   animations:^{
    self->_londonView.tintColor = [UIColor blueColor];
  }
                   completion:^(BOOL finished) {
    // Stop tracking view changes to allow CPU to idle.
    self->_london.tracksViewChanges = NO;
  }];
}

@end
      

iconView में UIView का इस्तेमाल किया जा सकता है. इसलिए, अपने मार्कर तय करने के लिए, स्टैंडर्ड यूज़र इंटरफ़ेस (यूआई) कंट्रोल की हैरारकी बनाई जा सकती है. हर व्यू में ऐनिमेशन की सुविधाओं का स्टैंडर्ड सेट होता है. मार्कर के साइज़, रंग, और अल्फा लेवल में बदलाव किए जा सकते हैं. साथ ही, अपनी पसंद के मुताबिक बदलाव भी किए जा सकते हैं. iconView प्रॉपर्टी, frame और center को छोड़कर, UIView की उन सभी प्रॉपर्टी के लिए ऐनिमेशन की सुविधा देता है जिनमें ऐनिमेशन जोड़ा जा सकता है.

iconView का इस्तेमाल करते समय, कृपया इन बातों का ध्यान रखें:

• tracksViewChanges को YES पर सेट करने पर, UIView के लिए ज़्यादा संसाधनों की ज़रूरत पड़ सकती है. इससे बैटरी खर्च बढ़ सकता है. इसकी तुलना में, एक फ़्रेम UIImage स्टैटिक होता है और उसे फिर से रेंडर करने की ज़रूरत नहीं होती.
• अगर स्क्रीन पर कई मार्कर हैं और हर मार्कर का अपना UIView है और सभी मार्कर एक साथ बदलावों को ट्रैक कर रहे हैं, तो हो सकता है कि कुछ डिवाइसों पर मैप रेंडर करने में समस्या आएं.
• iconView, उपयोगकर्ता के इंटरैक्शन का जवाब नहीं देता, क्योंकि यह व्यू का स्नैपशॉट होता है.
• व्यू इस तरह काम करता है जैसे clipsToBounds की वैल्यू YES पर सेट हो, भले ही उसकी असल वैल्यू कुछ भी हो. ऐसे ट्रांसफ़ॉर्म लागू किए जा सकते हैं जो बॉउंड के बाहर काम करते हैं. हालांकि, आपका खींचा गया ऑब्जेक्ट, ऑब्जेक्ट के बॉउंड में होना चाहिए. सभी ट्रांसफ़ॉर्म/शिफ़्ट की निगरानी की जाती है और उन्हें लागू किया जाता है. खास जानकारी: सबव्यू, व्यू में होने चाहिए.

tracksViewChanges प्रॉपर्टी को कब सेट करना है, यह तय करने के लिए आपको परफ़ॉर्मेंस से जुड़ी बातों को ध्यान में रखना चाहिए. साथ ही, मार्कर को अपने-आप फिर से ड्रॉ होने के फ़ायदों को भी ध्यान में रखना चाहिए. उदाहरण के लिए:

• अगर आपको कई बदलाव करने हैं, तो प्रॉपर्टी को YES पर सेट करें. इसके बाद, उसे फिर से NO पर सेट करें.
• जब कोई ऐनिमेशन चल रहा हो या कॉन्टेंट अलग-अलग समय पर लोड हो रहा हो, तो आपको प्रॉपर्टी को YES पर सेट करके रखना चाहिए. ऐसा तब तक करें, जब तक सभी कार्रवाइयां पूरी न हो जाएं.

मार्कर की ओपैसिटी बदलना

मार्कर की opacity प्रॉपर्टी की मदद से, उसकी ओपैसिटी को कंट्रोल किया जा सकता है. आपको ओपैसिटी को 0.0 और 1.0 के बीच के फ़्लोट के तौर पर बताना चाहिए. यहां 0 का मतलब पूरी तरह से पारदर्शी और 1 का मतलब पूरी तरह से अपारदर्शी है.

Swift

marker.opacity = 0.6
      

Objective-C

marker.opacity = 0.6;
      

GMSMarkerLayer का इस्तेमाल करके, कोर ऐनिमेशन की मदद से मार्कर की ओपैसिटी को ऐनिमेट किया जा सकता है.

मार्कर को फ़्लैट करना

मार्कर आइकॉन आम तौर पर, मैप के बजाय डिवाइस की स्क्रीन के हिसाब से बनाए जाते हैं. इसलिए, मैप को घुमाने, झुकाने या ज़ूम करने से, मार्कर का ओरिएंटेशन ज़रूरी नहीं है कि बदल जाए.

मार्कर के ओरिएंटेशन को धरती के हिसाब से फ़्लैट किया जा सकता है. मैप को घुमाने पर, फ़्लैट मार्कर घूम जाते हैं. साथ ही, मैप को झुकाने पर, इनका पर्सपेक्टिव बदल जाता है. मैप को ज़ूम इन या ज़ूम आउट करने पर, फ़्लैट मार्कर का साइज़ नहीं बदलता.

मार्कर का ओरिएंटेशन बदलने के लिए, मार्कर की flat प्रॉपर्टी को YES या true पर सेट करें.

Swift

let positionLondon = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
let londonMarker = GMSMarker(position: positionLondon)
londonMarker.isFlat = true
londonMarker.map = mapView
      

Objective-C

CLLocationCoordinate2D positionLondon = CLLocationCoordinate2DMake(51.5, -0.127);
GMSMarker *londonMarker = [GMSMarker markerWithPosition:positionLondon];
londonMarker.flat = YES;
londonMarker.map = mapView;
      

मार्कर को घुमाना

rotation प्रॉपर्टी को सेट करके, मार्कर को उसके ऐंकर पॉइंट के चारों ओर घुमाया जा सकता है. घुमाव को CLLocationDegrees टाइप के तौर पर बताएं. इसे डिफ़ॉल्ट स्थिति से, घड़ी की दिशा में डिग्री में मेज़र किया जाता है. जब मार्कर मैप पर सीधा हो, तो डिफ़ॉल्ट तौर पर उसकी स्थिति उत्तर होती है.

इस उदाहरण में मार्कर को 90° घुमाया गया है. groundAnchor प्रॉपर्टी को 0.5,0.5 पर सेट करने से, मार्कर को उसके आधार के बजाय, उसके बीच में घुमाया जाता है.

Swift

let degrees = 90.0
londonMarker.groundAnchor = CGPoint(x: 0.5, y: 0.5)
londonMarker.rotation = degrees
londonMarker.map = mapView
      

Objective-C

CLLocationDegrees degrees = 90;
londonMarker.groundAnchor = CGPointMake(0.5, 0.5);
londonMarker.rotation = degrees;
londonMarker.map = mapView;
      

मार्कर पर इवेंट मैनेज करना

मैप पर होने वाले इवेंट को सुना जा सकता है. जैसे, जब कोई उपयोगकर्ता किसी मार्कर पर टैप करता है. इवेंट सुनने के लिए, आपको GMSMapViewDelegate प्रोटोकॉल लागू करना होगा. खास मार्कर इवेंट को मैनेज करने का तरीका जानने के लिए, मार्कर इवेंट और जेस्चर लेख पढ़ें. इवेंट की गाइड में, GMSMapViewDelegate पर मौजूद तरीकों की सूची भी दी गई है. Street View इवेंट के बारे में जानने के लिए, GMSPanoramaViewDelegate देखें.