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

प्लैटफ़ॉर्म चुनें: Android Android 3D iOS iOS 3D JavaScript Web Service

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

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

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

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

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

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

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

  2. Cloud Console में, Maps Management पेज पर जाएं.

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

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

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

    1. नाम के लिए, मैप आईडी को कोई नाम दें.
    2. ज़रूरी नहीं: ब्यौरा के लिए, बताएं कि मैप आईडी का इस्तेमाल किस लिए किया जाता है.
    3. मैप का टाइप के लिए, वह प्लैटफ़ॉर्म चुनें जिस पर आपको मैप आईडी का इस्तेमाल करना है. JavaScript चुनने पर, रास्टर (डिफ़ॉल्ट) या वेक्टर मैप का टाइप भी चुनें. वेक्टर मैप के बारे में ज़्यादा जानने के लिए, वेक्टर मैप देखें.
    4. अपना नया मैप आईडी दिखाने के लिए, सेव करें पर क्लिक करें.

मैप के किसी स्टाइल से मैप आईडी जोड़ना

अगर क्लाउड पर मैप की स्टाइलिंग की सुविधाओं का इस्तेमाल किया जा रहा है, तो आपको अपने मैप आईडी से मैप की स्टाइल जोड़नी होगी. ज़्यादा जानकारी के लिए, मैप के किसी स्टाइल से मैप आईडी जोड़ना लेख पढ़ें.

अपने ऐप्लिकेशन में मैप आईडी जोड़ना

Android

MapView क्लास का इस्तेमाल करके, गतिविधि की लेआउट फ़ाइल में मौजूद <fragment> एलिमेंट के ज़रिए अपना मैप आईडी जोड़ें. इसके अलावा, GoogleMapOptions क्लास का इस्तेमाल करके प्रोग्राम के हिसाब से भी मैप आईडी जोड़ा जा सकता है.

उदाहरण के लिए, मान लें कि आपने एक मैप आईडी बनाया है. इसे map_id में res/values/strings.xml नाम की स्ट्रिंग वैल्यू के तौर पर सेव किया गया है:

<?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

mapId स्ट्रिंग प्रॉपर्टी को Map3DOptions पर सेट करें. इसके लिए, प्रोग्राम के हिसाब से या लेआउट एट्रिब्यूट का इस्तेमाल करें. Map3DOptions, इंस्टैंटिएशन के दौरान Map3DView ऑब्जेक्ट को दिए जाते हैं. Map3DView के कंस्ट्रक्ट हो जाने के बाद, इन्हें बदला नहीं जा सकता.

डेवलपर के पास, नए OnMapIdErrorListener को लागू करने का विकल्प होता है. इससे उन्हें अमान्य या नहीं मिले मैप आईडी के बारे में सूचना मिलती है और वे इस पर कार्रवाई कर पाते हैं.

मैप आईडी जोड़ें, प्रोग्राम के हिसाब से मैप बनाएं, और OnMapIdErrorListener सेट करें:

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, OnMapIdError {
  fun onCreate(...) {
    val map3DOptions = Map3DOptions(mapMode = Map3DMode.HYBRID, mapId = "MAP_ID")
    val map3DView = Map3DView(context, map3DOptions)
    map3DView.getMap3dViewAsync(this)
  }

  override fun onMap3DViewReady(googleMap3D: GoogleMap3D) {
    googleMap3D.setMapIdErrorListener(
      object : OnMapIdErrorListener {
        override fun onMapIdError() {
          // Handle error event.
        }
      }
    )
  }
}

लेआउट एट्रिब्यूट का इस्तेमाल करके मैप आईडी जोड़ें:

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