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

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

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

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

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

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

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

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

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

  2. Cloud Console-এ, Maps ম্যানেজমেন্ট পৃষ্ঠায় যান।

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

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

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

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

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

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

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

Android

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

যেমন, ধরে নিন আপনি একটি ম্যাপ আইডি তৈরি করেছেন যা 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" />

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

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

প্রোগ্রাম্যাটিক উপায়ে ম্যাপ আইডি নির্দিষ্ট করতে, GoogleMapOptions ক্লাস ব্যবহার করে এটিকে a 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 প্রপার্টি সেট করুন, এটি প্রোগ্রামাটিক বা লেআউট অ্যাট্রিবিউট ব্যবহার করে করা যেতে পারে। Map3DOptions ইনস্ট্যানসিয়েশনের সময় Map3DView অবজেক্টকে দেওয়া হয় এবং 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 Console থেকে ম্যাপ আইডি স্ট্রিং সহ 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" />

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

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