मार्कर

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

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

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

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

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

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

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

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 options = GMSMapViewOptions()
options.camera = camera
let mapView = GMSMapView(options: options)
// ...
mapView.clear()
      

Objective-C

GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.8683
                                                        longitude:151.2086
                                                             zoom:6];
GMSMapViewOptions *options = [[GMSMapViewOptions alloc] init];
options.camera = camera;
mapView = [[GMSMapView alloc] initWithOptions:options];
// ...
[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 options = GMSMapViewOptions()
    options.camera = camera
    let mapView = GMSMapView(options: options)
    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];
  GMSMapViewOptions *options = [[GMSMapViewOptions alloc] init];
  options.camera = camera;
  _mapView = [[GMSMapView alloc] initWithOptions:options];
  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 प्रॉपर्टी, UIView की सभी ऐनिमेट की जा सकने वाली प्रॉपर्टी के ऐनिमेशन के साथ काम करती है. हालांकि, frame और center के साथ काम नहीं करती.

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

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

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

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

मार्कर की अपारदर्शिता बदलना

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

Swift

marker.opacity = 0.6
      

Objective-C

marker.opacity = 0.6;
      

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

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

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

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

मार्कर का ओरिएंटेशन बदलने के लिए, मार्कर की 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 पर उपलब्ध तरीकों की सूची भी दी गई है. स्ट्रीट व्यू इवेंट के लिए, GMSPanoramaViewDelegate देखें.