কীভাবে ম্যাপ আইডি তৈরি করতে হয়

প্ল্যাটফর্ম বেছে নিন: Android Android 3D iOS iOS 3D JavaScript ওয়েব পরিষেবা

ম্যাপ আইডি হল একটি অনন্য শনাক্তকারী যা Google Cloud-এ সেভ করা Google Maps-এর স্টাইলিং ও কনফিগারেশন সেটিংসকে উপস্থাপন করে। আপনার ওয়েবসাইট ও অ্যাপ্লিকেশনে ফিচার চালু করতে বা ম্যাপ ম্যানেজ বা স্টাইল করতে, আপনি ম্যাপ আইডি ব্যবহার করেন। ম্যাপ ম্যানেজমেন্ট পৃষ্ঠায় আপনার Google Cloud কনসোল প্রোজেক্টে, আপনার প্রয়োজনীয় প্রতিটি প্ল্যাটফর্মের জন্য ম্যাপ আইডি তৈরি করতে পারবেন--JavaScript, Android, iOS বা স্ট্যাটিক ম্যাপ।

ম্যাপ আইডি ব্যবহার করে এমন আরও বিবরণ এবং ফিচারের জন্য, ম্যাপ আইডি ওভারভিউ দেখুন।

প্রয়োজনীয় অনুমতি

আপনার প্রোজেক্টে কোনও ম্যাপ আইডি তৈরি বা ম্যানেজ করতে, আপনাকে প্রোজেক্টের জন্য Cloud কনসোল IAM পৃষ্ঠায় উপযুক্ত ভূমিকা-লেভেল অনুমতি, এডিটর বা মালিক সহ প্রিন্সিপাল ব্যবহার করতে হবে। বিস্তারিত জানতে, IAM-এর প্রাথমিক ও পূর্বনির্ধারিত ভূমিকা সংক্রান্ত রেফারেন্স দেখুন।

ম্যাপ আইডি তৈরি করা

এইসব ধাপ অনুসরণ করে Cloud কনসোলে ম্যাপ আইডি তৈরি করুন:

  1. প্রয়োজনীয় অনুমতি সহ Cloud Console প্রোজেক্টে সাইন-ইন করুন ও সেটি খুলুন।

  2. Cloud কনসোলে, Maps ম্যানেজমেন্ট পৃষ্ঠায় যান।

  3. ম্যাপ আইডি তৈরি করুন বিকল্পে ক্লিক করুন।

    নতুন ম্যাপ আইডি তৈরি করুন

  4. নতুন ম্যাপ আইডি তৈরি করুন পৃষ্ঠায়, এইসব ধাপ অনুসরণ করুন:

    1. নাম-এর জন্য, ম্যাপ আইডিকে একটি নাম দিন।
    2. ঐচ্ছিক: বিবরণের জন্য, ম্যাপ আইডি কী কাজে লাগে তা বর্ণনা করুন।
    3. ম্যাপের ধরনের জন্য, আপনি যে প্ল্যাটফর্মে ম্যাপ আইডি ব্যবহার করার পরিকল্পনা করেছেন সেটি বেছে নিন। আপনি জাভাস্ক্রিপ্ট বেছে নিলে, আপনাকে রাস্টার (ডিফল্ট) বা ভেক্টর ম্যাপের ধরনও বেছে নিতে হবে। ভেক্টর ম্যাপ সম্পর্কে আরও জানতে, ভেক্টর ম্যাপ দেখুন।
    4. আপনার নতুন ম্যাপ আইডি দেখতে সেভ করুন বিকল্পে ক্লিক করুন।

ম্যাপ স্টাইলের সাথে ম্যাপ আইডি অ্যাসোসিয়েট করা

আপনি ক্লাউড-ভিত্তিক ম্যাপ স্টাইলিং ব্যবহার করলে, আপনার ম্যাপ আইডির সাথে ম্যাপ স্টাইল অ্যাসোসিয়েট করেন। আরও জানতে, ম্যাপ আইডিতে আপনার স্টাইল অ্যাসোসিয়েট করুন দেখুন।

আপনার অ্যাপে ম্যাপ আইডি যোগ করুন

Android

অ্যাক্টিভিটির লেআউট ফাইলে <fragment> এলিমেন্টের মাধ্যমে, MapView ক্লাস ব্যবহার করে অথবা প্রোগ্রাম্যাটিক্যালি GoogleMapOptions ক্লাস ব্যবহার করে আপনার ম্যাপ আইডি যোগ করুন।

যেমন, ধরে নিন আপনি একটি ম্যাপ আইডি তৈরি করেছেন যা res/values/strings.xml-এ map_id নামের স্ট্রিং ভ্যালু হিসেবে সেভ করা আছে:

<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="map_id">MAP_ID</string>
</resources>

অ্যাক্টিভিটির লেআউট ফাইলে <fragment> এলিমেন্টের মাধ্যমে যোগ করা ম্যাপের ক্ষেত্রে, কাস্টম স্টাইল থাকা উচিত এমন সব ম্যাপ ফ্র্যাগমেন্টকে অবশ্যই map:mapId অ্যাট্রিবিউটে ম্যাপ আইডি উল্লেখ করতে হবে:

<fragment xmlns:map="http://schemas.android.com/apk/res-auto"
    map:name="com.google.android.gms.maps.SupportMapFragment"
    …
    map:mapId="@string/map_id" />

এছাড়াও, আপনি ম্যাপ আইডি নির্দিষ্ট করতে MapView ক্লাসের map:mapId অ্যাট্রিবিউট ব্যবহার করতে পারেন:

<com.google.android.gms.maps.MapView
    xmlns:map="http://schemas.android.com/apk/res-auto"
    ....
    map:mapId="@string/map_id" />

প্রোগ্রাম্যাটিক্যালি ম্যাপ আইডি নির্দিষ্ট করতে, GoogleMapOptions ক্লাস ব্যবহার করে এটি MapFragment ইনস্ট্যান্সে পাস করুন:

Java

 MapFragment mapFragment = MapFragment.newInstance(
     new GoogleMapOptions()
         .mapId(getResources().getString(R.string.map_id)));

Kotlin

 val mapFragment = MapFragment.newInstance(
     GoogleMapOptions()
         .mapId(resources.getString(R.string.map_id))
 )

Android Studio-তে, আপনি সাধারণত যেভাবে অ্যাপ তৈরি ও রান করেন, সেইভাবেই করুন। প্রথম ধাপে কনফিগার করা কাস্টম স্টাইল নির্দিষ্ট ম্যাপ আইডি সহ সব ম্যাপে প্রয়োগ করা হয়।

Android 3D

Map3DOptions-এ mapId String প্রপার্টি সেট করুন, এটি প্রোগ্রামাটিক বা লেআউট অ্যাট্রিবিউট ব্যবহার করে করা যেতে পারে। ইনস্ট্যান্টিয়েশনের সময় Map3DView অবজেক্টে Map3DOptions প্রদান করা হয় এবং Map3DView তৈরি হওয়ার পরে পরিবর্তন করা যায় না।

ম্যাপ আইডি যোগ করুন, প্রোগ্রাম্যাটিকভাবে ম্যাপ তৈরি করুন:

import com.google.android.gms.maps3d.GoogleMap3D
import com.google.android.gms.maps3d.Map3DOptions
import com.google.android.gms.maps3d.Map3DView
import com.google.android.gms.maps3d.OnMap3DViewReadyCallback
import com.google.android.gms.maps3d.model.Map3DMode

class MainActivity : Activity(), OnMap3DViewReadyCallback {
  fun onCreate(...) {
    val map3DOptions = Map3DOptions(mapMode = Map3DMode.HYBRID, mapId = "MAP_ID")
    val map3DView = Map3DView(context, map3DOptions)
    map3DView.getMap3dViewAsync(this)
  }
}

লেআউট অ্যাট্রিবিউট ব্যবহার করে ম্যাপ আইডি যোগ করুন:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:map3d="http://schemas.android.com/apk/res-auto"
   android:layout_width="match_parent" android:layout_height="match_parent">
 <com.google.android.gms.maps3d.Map3DView
     android:id="@+id/map3dView"
     android:layout_width="fill_parent"
     android:layout_height="fill_parent"
     map3d:mode="hybrid"
     map3d:mapId="MAP_ID"/>
</LinearLayout>

iOS

ম্যাপ আইডি ব্যবহার করে ম্যাপ ইনস্ট্যানশিয়েট করতে, নিম্নলিখিত কাজগুলি করুন:

  1. Cloud কনসোল থেকে ম্যাপ আইডি স্ট্রিং সহ একটি GMSMapID তৈরি করুন।
  2. আপনার তৈরি করা ম্যাপ আইডি উল্লেখ করে একটি GMSMapView তৈরি করুন।

Swift

let camera = GMSCameraPosition(latitude: 47.0169, longitude: -122.336471, zoom: 12)
let mapID = GMSMapID(identifier: "MAP_ID")
let mapView = GMSMapView(frame: .zero, mapID: mapID, camera: camera)
self.view = mapView

Objective-C

GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:47.0169
                                                        longitude:-122.336471
                                                             zoom:12];
GMSMapID *mapID = [GMSMapID mapIDWithIdentifier:@"MAP_ID"];
GMSMapView *mapView = [GMSMapView mapWithFrame:CGRectZero mapID:mapID camera:camera];
self.view = mapView;

আপনি নিজের ম্যাপ আইডি ব্যবহার করলে, যেকোনও সময় নতুন স্টাইল পেতে Cloud কনসোলে আপনার ম্যাপ আইডি সেট করতে পারবেন এবং সেই স্টাইল আপনার ম্যাপ ভিউতে আপনার এবং ব্যবহারকারীদের জন্য প্রায় ছয় ঘণ্টার মধ্যে অটোমেটিক দেখা যাবে।

আপনি যদি পরিবর্তনগুলি অবিলম্বে দেখতে চান, তাহলে অ্যাপ থেকে বেরিয়ে এসে, সম্প্রতি ব্যবহৃত অ্যাপের তালিকা থেকে অ্যাপটি বন্ধ করে এবং তারপরে এটি আবার খুলে আপনার অ্যাপটি বন্ধ করে রিস্টার্ট করতে পারেন। তারপরে আপডেট করা ম্যাপটি দেখা যাবে।

iOS 3D

iOS ডেভেলপাররা Map-এ নতুন style মডিফায়ার সেট করতে পারবেন। এই মডিফায়ার একটি ম্যাপ আইডি গ্রহণ করে এবং ম্যাপ আইডি ভুল হলে বা খুঁজে না পাওয়া গেলে, ঐচ্ছিকভাবে একটি ক্লোজারকে আহ্বান করে।

import SwiftUI
import GoogleMaps3D

struct ContentView: View {
  init () {
    Map.apiKey = "YOUR_API_KEY"
  }
  var body: some View {
    Map(initialCamera: .init(
        latitude: 0.0,
        longitude: 0.0,
      ),
      mode: .hybrid
    )
    .style(
      with: "MAP_ID",
      error: {
        // Handle styling error.
      }
    )
    // Could also use trailing closure syntax
    //  .style(with: "MAP_ID") {
    //     // Handle styling error.
    //  }
  }
}

জাভাস্ক্রিপ্ট

আপনার অ্যাপ্লিকেশন কোডে ম্যাপ আইডি সহ ম্যাপ তৈরি করতে:

  1. আপনি যদি আগে থেকেই এম্বেড করা JSON কোড দিয়ে ম্যাপ কাস্টমাইজ করে থাকেন, তাহলে আপনার MapOptions অবজেক্ট থেকে styles প্রপার্টি সরিয়ে দিন; অন্যথায়, এই ধাপটি এড়িয়ে যান।

  2. mapId প্রপার্টি ব্যবহার করে ম্যাপে একটি ম্যাপ আইডি যোগ করুন। যেমন:

map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8,
mapId: 'MAP_ID'
});

জাভাস্ক্রিপ্ট 3D

আপনার অ্যাপ্লিকেশনে ম্যাপ আইডি সহ ম্যাপ তৈরি করতে, mapId প্রপার্টি ব্যবহার করে ম্যাপে ম্যাপ আইডি যোগ করুন। যেমন:

async function init() {
    const { Map3DElement } = await google.maps.importLibrary('maps3d');

    const map = new Map3DElement({
        center: {
            lat: 37.75183154601466,
            lng: -119.52369070507672,
            altitude: 2200,
        },
        tilt: 67.5,
        heading: 108.94057782079429,
        range: 6605.57279990986,
        mapId: 'bcce776b92de1336e22c569f', // Styles are associated with map IDs.
        mode: 'HYBRID',
    });

    document.body.append(map);
}

void init();

Maps Static

আমাদের ওয়েব-পরিষেবা API ব্যবহার করে এমন নতুন বা আগে থেকে থাকা ম্যাপে ম্যাপ আইডি যোগ করতে, map_id URL প্যারামিটার যোগ করুন এবং এটি আপনার ম্যাপ আইডিতে সেট করুন। এই উদাহরণে Maps Static API ব্যবহার করে ম্যাপে ম্যাপ আইডি যোগ করা দেখানো হয়েছে।

<img src="https://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318&markers=color:red%7Clabel:C%7C40.718217,-73.998284&key=YOUR_API_KEY&map_id=MAP_ID&signature=YOUR_SIGNATURE" />

নিউ ইয়র্ক সিটি, NY, মার্কিন যুক্তরাষ্ট্রের ব্রুকলিন ব্রিজের উপর ফোকাস করা একটি ম্যাপ, যার নিচে ডানদিকের কোণে ম্যাপ কন্ট্রোল রয়েছে। ম্যাপে রাস্তা, জল ও জমির কাস্টম স্টাইলিং দেখানো হয়।

আপনার ম্যাপ আইডি যোগ করার আগে Maps Static URL-এ ডিজিটাল স্বাক্ষর থাকলে, ম্যাপ আইডি যোগ করার পরে আপনাকে নতুন ডিজিটাল স্বাক্ষর তৈরি ও যোগ করতে হবে। আপনার নতুন URL সাইনিং সিক্রেট তৈরি করার সময়, URL থেকে আপনার আগের ডিজিটাল সিগনেচার সরিয়ে দিতে ভুলবেন না।