🗺️ Maps Integration (Google Maps) in React Native

আধুনিক মোবাইল অ্যাপগুলোর একটি গুরুত্বপূর্ণ অংশ হলো Google Maps Integration — বিশেষ করে food delivery, e-commerce, cab booking, parcel tracking, logistics, weather, এবং social networking অ্যাপগুলোর জন্য। React Native-এ Google Maps ইমপ্লিমেন্ট করা খুবই সহজ এবং শক্তিশালী।

---

🔹 কেন Google Maps ব্যবহার করবেন?

• Location Tracking
• Real-time ETA Calculation
• Live Order/Delivery Tracking
• Nearby Places Search
• Marker, Route Drawing, Polyline
• Map Custom Styling

React Native আপনাকে Native Google Maps ব্যবহার করার সুবিধা দেয় — যা performance অত্যন্ত smooth এবং fast।

---

🔹 প্রয়োজনীয় Package ইনস্টল

npm install react-native-maps
    

Expo ব্যবহার করলে আপনাকে আলাদা করে native module install করতে হবে না।

---

🔹 Google Maps API Key Setup

প্রথমে Google Cloud Console-এ গিয়ে একটি API Key তৈরি করতে হবে।

• Maps SDK for Android
• Maps SDK for iOS
• Places API (optional)

আপনার API Key অবশ্যই secured রাখতে হবে, production-এ restrict করা জরুরি।

---

🔹 Basic Google Map Render Example

import MapView, { Marker } from 'react-native-maps';
import { View, StyleSheet } from 'react-native';

export default function App() {
  return (
    <View style={{ flex: 1 }}>
      <MapView 
        style={{ flex: 1 }}
        initialRegion={{
          latitude: 22.5726,
          longitude: 88.3639,
          latitudeDelta: 0.05,
          longitudeDelta: 0.05,
        }}
      >
        <Marker
          coordinate={{ latitude: 22.5726, longitude: 88.3639 }}
          title="Kolkata"
          description="This is a marker example"
        />
      </MapView>
    </View>
  );
}
    

উপরের কোডটি একটি basic Google Map এবং একটি marker প্রদর্শন করবে।

---

🔹 User Current Location দেখানোর জন্য Permissions

Expo-তে:

expo install expo-location
    

import * as Location from 'expo-location';
import { useEffect, useState } from 'react';

const [location, setLocation] = useState(null);

useEffect(() => {
  (async () => {
    let { status } = await Location.requestForegroundPermissionsAsync();
    if (status !== 'granted') return;

    let loc = await Location.getCurrentPositionAsync({});
    setLocation(loc.coords);
  })();
}, []);
    

Location permission allow করলে map user-এর current location track করতে পারবে।

---

🔹 Map Marker, Custom Icon & Draggable Marker

<Marker
  coordinate={{ latitude, longitude }}
  draggable
  onDragEnd={(e) => console.log(e.nativeEvent.coordinate)}
  title="Drag Me"
  description="This is a draggable marker"
/>
    

Marker drag করার মাধ্যমে user নিজে location change করতে পারে — যা cab booking, parcel tracking-এর মতো অ্যাপে খুবই কাজে লাগে।

---

🔹 Map Polyline (Route Drawing)

import { Polyline } from 'react-native-maps';

<Polyline
  coordinates={[
    { latitude: 22.57, longitude: 88.36 },
    { latitude: 22.58, longitude: 88.37 },
  ]}
  strokeWidth={5}
  strokeColor="teal"
/>
    

Polyline ব্যবহার করে map-এ route দেখানো যায় (like Google Maps directions)।

---

🔹 Custom Styled Map (Dark Mode / Teal Theme)

আপনি চাইলে map-এর theme, colors, brightness—সব customize করতে পারবেন।

<MapView customMapStyle={myCustomMapStyle} ... />
    

---

🔹 কোথায় Google Maps ব্যবহার করবেন?

• Food Delivery Live Tracking
• Cab Booking Apps (Uber/Ola Clone)
• Nearby Place Suggestions
• Geo-fencing
• Hotel / Restaurant Finder
• Tour Guide Apps
• Logistics & Transport Tracking

---

✔ উপসংহার

React Native-এ Google Maps Integration অত্যন্ত শক্তিশালী এবং ব্যবহার করা সহজ। Map, marker, route, current location, custom styling — সব ফিচার খুব দ্রুত যোগ করা যায়। সঠিকভাবে API Key restrict করলে security সমস্যা থাকে না। Location-based modern apps তৈরি করার জন্য এটি একটি essential skill।