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

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 इंस्टेंस में पास करें:

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