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

Android

गतिविधि की लेआउट फ़ाइल में <fragment> एलिमेंट के ज़रिए, MapView क्लास का इस्तेमाल करके या 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 इंस्टेंस को पास करें:

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

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

Android Studio में, अपने ऐप्लिकेशन को सामान्य तरीके से बनाएं और चलाएं. पहले चरण में कॉन्फ़िगर की गई पसंद के मुताबिक स्टाइल, तय किए गए मैप आईडी वाले सभी मैप पर लागू होती हैं.

Android 3D

mapId स्ट्रिंग प्रॉपर्टी को Map3DOptions पर सेट करें. इसके लिए, प्रोग्राम के हिसाब से या लेआउट एट्रिब्यूट का इस्तेमाल करें. इंस्टैंशिएशन के दौरान, 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 बनाएं.

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

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();
index.js

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" />