মার্কার

প্ল্যাটফর্ম বেছে নিন: 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 সেট করা থাকলে, API 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 গ্রহণ করে, তাই আপনার কাছে স্ট্যান্ডার্ড UI কন্ট্রোলের একটি হায়ারার্কি থাকতে পারে যা আপনার মার্কারগুলিকে সংজ্ঞায়িত করে, প্রতিটি ভিউতে অ্যানিমেশন ক্ষমতার স্ট্যান্ডার্ড সেট থাকে। আপনি মার্কারের সাইজ, রঙ ও আলফা লেভেলে পরিবর্তন করার পাশাপাশি যেকোনও ট্রান্সফর্মেশন প্রয়োগ করতে পারবেন। iconView প্রপার্টি UIView-এর সব অ্যানিমেট করা যায় এমন প্রপার্টির অ্যানিমেশন সাপোর্ট করে, তবে frame এবং center-এর ক্ষেত্রে এটি প্রযোজ্য নয়।

iconView ব্যবহার করার সময় নিম্নলিখিত বিষয়গুলি মনে রাখবেন:

  • tracksViewChanges-এর মান YES-এ সেট করা থাকলে, UIView-এর জন্য অনেক রিসোর্স প্রয়োজন হতে পারে, যার ফলে ব্যাটারির ব্যবহার বেড়ে যেতে পারে। তুলনামূলকভাবে, একটি সিঙ্গেল ফ্রেম UIImage স্ট্যাটিক এবং এটি আবার রেন্ডার করার প্রয়োজন হয় না।
  • স্ক্রিনে অনেক মার্কার থাকলে এবং প্রতিটি মার্কারের নিজস্ব UIView থাকলে এবং সব মার্কার একই সময়ে পরিবর্তন ট্র্যাক করলে, কিছু ডিভাইসে ম্যাপ রেন্ডার করতে সমস্যা হতে পারে।
  • iconView ব্যবহারকারীর ইন্টার‍্যাকশনে কোনও প্রতিক্রিয়া দেখায় না, কারণ এটি হল ভিউয়ের স্ন্যাপশট।
  • ভিউটি এমনভাবে কাজ করে যেন clipsToBounds-এর মান YES-এ সেট করা আছে, এর প্রকৃত মান যাই হোক না কেন। আপনি এমন ট্রান্সফর্ম প্রয়োগ করতে পারেন যা বাউন্ডের বাইরে কাজ করে, তবে আপনার আঁকা অবজেক্টটি অবশ্যই অবজেক্টের বাউন্ডের মধ্যে থাকতে হবে। সব ট্রান্সফর্ম/শিফ্ট মনিটর ও প্রয়োগ করা হয়। সংক্ষেপে: সাবভিউ অবশ্যই ভিউয়ের মধ্যে থাকতে হবে।
  • GMSMarker-এ -copyWithZone: ব্যবহার করতে, আপনাকে প্রথমে GMSMarker কপি করতে হবে এবং তারপর কপিতে iconView-এর নতুন ইনস্ট্যান্স সেট করতে হবে। UIView NSCopying-এ কাজ করে না, তাই এটি iconView কপি করতে পারবে না।

tracksViewChanges প্রপার্টি কখন সেট করতে হবে তা নির্ধারণ করতে, আপনাকে মার্কার অটোমেটিক রিড্র করার সুবিধার সাথে পারফর্ম্যান্সের বিষয়টি বিবেচনা করতে হবে। যেমন:

  • আপনার যদি একাধিক পরিবর্তন করার থাকে, তাহলে আপনি প্রপার্টিটি YES-এ পরিবর্তন করতে পারেন এবং তারপর আবার NO-এ ফিরে যেতে পারেন।
  • কোনও অ্যানিমেশন চলাকালীন বা কন্টেন্ট অ্যাসিঙ্ক্রোনাসভাবে লোড হওয়ার সময়, অ্যাকশন সম্পূর্ণ না হওয়া পর্যন্ত আপনাকে প্রপার্টি YES-এ সেট করে রাখতে হবে।

মার্কারের অস্বচ্ছতা পরিবর্তন করা

আপনি opacity প্রপার্টি ব্যবহার করে মার্কারের অস্বচ্ছতা নিয়ন্ত্রণ করতে পারবেন। আপনাকে ০.০ থেকে ১.০-এর মধ্যে ফ্লোট হিসেবে অস্বচ্ছতা উল্লেখ করতে হবে, যেখানে ০ হল সম্পূর্ণ স্বচ্ছ এবং ১ হল সম্পূর্ণ অস্বচ্ছ।

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 টাইপ হিসেবে রোটেশন নির্দিষ্ট করুন। ম্যাপে মার্কার ফ্ল্যাট থাকলে, ডিফল্ট পজিশন উত্তর দিকে থাকে।

নিম্নলিখিত উদাহরণটি মার্কারটিকে ৯০° ঘোরায়। 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 দেখুন।