मैप आईडी बनाने का तरीका

प्लैटफ़ॉर्म चुनें: Android Android 3D iOS iOS 3D JavaScript वेब सेवा

मैप आईडी, वह यूनीक आईडी होता है जो Google Maps की स्टाइलिंग और कॉन्फ़िगरेशन सेटिंग को दिखाता है. यह आईडी, Google Cloud में सेव होता है. मैप आईडी का इस्तेमाल करके, अपनी वेबसाइटों और ऐप्लिकेशन में मैप से जुड़ी सुविधाएं चालू की जा सकती हैं. साथ ही, मैप मैनेज किए जा सकते हैं और उनकी स्टाइल बदली जा सकती है. Google Cloud Console में मौजूद अपने प्रोजेक्ट के मैप मैनेजमेंट पेज पर जाकर, JavaScript, Android, iOS या Static Maps जैसे हर प्लैटफ़ॉर्म के लिए मैप आईडी बनाए जा सकते हैं.

मैप आईडी का इस्तेमाल करने वाली सुविधाओं और ज़्यादा जानकारी के लिए, मैप आईडी की खास जानकारी देखें.

आवश्यक अनुमतियां

अपने प्रोजेक्ट में किसी भी मैप आईडी को बनाने या मैनेज करने के लिए, आपको ऐसे प्रिंसिपल का इस्तेमाल करना होगा जिसके पास प्रोजेक्ट के लिए Cloud Console के IAM पेज पर, एडिटर या मालिक के तौर पर भूमिका के हिसाब से ज़रूरी अनुमतियां हों. ज़्यादा जानकारी के लिए, IAM की बुनियादी और पहले से तय की गई भूमिकाओं के बारे में जानकारी देखें.

मैप आईडी बनाना

Cloud Console में मैप आईडी बनाने के लिए, यह तरीका अपनाएं:

  1. ज़रूरी अनुमतियों के साथ, Cloud Console में किसी प्रोजेक्ट में साइन इन करें और उसे खोलें.

  2. Cloud Console में, मैप मैनेजमेंट पेज पर जाएं.

  3. मैप आईडी बनाएं पर क्लिक करें.

    नया मैप आईडी बनाएं

  4. नया मैप आईडी बनाएं पेज पर, यह काम करें:

    1. नाम में, मैप आईडी को कोई नाम दें.
    2. ज़रूरी नहीं: जानकारी में, बताएं कि मैप आईडी का इस्तेमाल किस लिए किया जाता है.
    3. **मैप का टाइप** में, वह प्लैटफ़ॉर्म चुनें जिस पर आपको मैप आईडी का इस्तेमाल करना है. अगर आपने JavaScript चुना है, तो रास्टर (डिफ़ॉल्ट) या वेक्टर मैप का टाइप भी चुनें. वेक्टर मैप के बारे में ज़्यादा जानने के लिए, वेक्टर मैप देखें.
    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 स्ट्रिंग प्रॉपर्टी को प्रोग्राम के ज़रिए या लेआउट एट्रिब्यूट का इस्तेमाल करके सेट करें. 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 Console में कभी भी मैप आईडी को नई स्टाइल में सेट किया जा सकता है. इसके बाद, करीब छह घंटे के अंदर, आपके और उपयोगकर्ताओं के लिए मैप व्यू में वह स्टाइल अपने-आप दिखने लगेगी.

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

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.
    //  }
  }
}

JavaScript

अपने ऐप्लिकेशन कोड में, मैप आईडी की मदद से मैप बनाने के लिए:

  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'
});

Javascript 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

वेब-सेवा के हमारे किसी एपीआई का इस्तेमाल करने वाले नए या मौजूदा मैप में मैप आईडी जोड़ने के लिए, map_id यूआरएल पैरामीटर जोड़ें और इसे अपने मैप आईडी पर सेट करें. इस उदाहरण में, 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 यूआरएल में मैप आईडी जोड़ने से पहले, डिजिटल सिग्नेचर मौजूद है, तो मैप आईडी जोड़ने के बाद, आपको नया डिजिटल सिग्नेचर बनाना और जोड़ना होगा. नया यूआरएल साइनिंग सीक्रेट जनरेट करते समय, यूआरएल से अपना पिछला डिजिटल सिग्नेचर हटाना न भूलें.