मार्कर

प्लैटफ़ॉर्म चुनें: 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 प्रोटोकॉल लागू करना होगा. किसी खास मार्कर इवेंट को मैनेज करने का तरीका जानने के लिए, मार्कर इवेंट और हाथ के जेस्चर (हाव-भाव) देखें. इवेंट की गाइड में, GMSMapView लेन-देन के तरीकों की सूची भी दी गई है. Street View इवेंट के लिए, GMSPanoramaViewDelegate देखें.