React Uygulamalarında Google Haritalar API Entegrasyonu: Kapsamlı Bir Rehber
Giriş: React ve Google Haritalar API Neden Birlikte Kullanılmalı?
Modern web uygulamaları, kullanıcı deneyimini zenginleştirmek ve gerçek dünya verileriyle etkileşim kurmak için sıkça coğrafi konum tabanlı hizmetlere ihtiyaç duyar. Bu bağlamda, Google Haritalar API’si, dünya üzerindeki herhangi bir konumu görselleştirmek, yol tarifleri sunmak, ilgi çekici yerleri bulmak ve çok daha fazlasını yapmak için güçlü ve kapsamlı bir araç seti sunar. React ise, bileşen tabanlı yapısı, sanal DOM’u ve deklaratif programlama yaklaşımı sayesinde dinamik ve etkileşimli kullanıcı arayüzleri oluşturmak için popüler bir JavaScript kütüphanesidir. React’in modüler yapısı, Google Haritalar API’sinin karmaşık özelliklerini yönetilebilir ve yeniden kullanılabilir bileşenlere ayırmayı kolaylaştırır. Bu iki teknolojinin birleşimi, geliştiricilere hem performanslı hem de zengin özelliklere sahip harita tabanlı uygulamalar oluşturma imkanı sunar.
React uygulamalarına Google Haritalar entegrasyonu, harita bileşenlerinin uygulamanın geri kalanıyla sorunsuz bir şekilde etkileşim kurmasını sağlar. Örneğin, bir kullanıcının konumunu gösteren bir harita, aynı zamanda belirli bir bölgedeki işletmeleri listeleyen bir yan panel ile senkronize edilebilir. Bu entegrasyon, emlak uygulamalarından seyahat planlayıcılara, teslimat hizmetlerinden etkinlik buluculara kadar geniş bir yelpazedeki uygulamalar için temel bir gerekliliktir. Bu makale, React projelerinize Google Haritalar API’sini nasıl entegre edeceğinizi adım adım açıklayacak, farklı yaklaşımları inceleyecek ve en iyi uygulamaları sunacaktır.
Ön Hazırlıklar: Google Cloud Platform ve API Anahtarı Oluşturma
Google Haritalar API’sini kullanmaya başlamadan önce, Google Cloud Platform (GCP) üzerinde bazı temel ayarlamaları yapmanız gerekmektedir. Bu adımlar, API’ye erişim izni almak ve kullanımınızı yönetmek için kritik öneme sahiptir.
Google Cloud Projesi Oluşturma
İlk olarak, Google Cloud Console’a (console.cloud.google.com) giriş yapmanız ve yeni bir proje oluşturmanız gerekmektedir. Eğer mevcut bir projeniz varsa onu da kullanabilirsiniz. Yeni proje oluşturmak için:
1. GCP konsolunda, sayfanın üst kısmındaki proje seçicisinden “Yeni Proje” butonuna tıklayın.
2. Projenize anlamlı bir ad verin (örneğin, “React Harita Uygulaması”) ve bir kuruluş seçin (isteğe bağlı).
3. “Oluştur” butonuna tıklayın. Projenizin oluşturulması birkaç dakika sürebilir.
Gerekli API’leri Etkinleştirme
Projenizi oluşturduktan sonra, Google Haritalar API’sinin hangi hizmetlerini kullanacağınıza karar vermeniz ve bu hizmetleri projeniz için etkinleştirmeniz gerekir. En yaygın kullanılan API’ler şunlardır:
* Maps JavaScript API: Web tarayıcılarında dinamik haritalar görüntülemek ve harita üzerinde etkileşim kurmak için temel API’dir.
* Geocoding API: Adresleri coğrafi koordinatlara (enlem/boylam) ve tersini dönüştürmek için kullanılır.
* Places API: Belirli bir konumdaki ilgi çekici yerleri (işletmeler, restoranlar vb.) aramak ve detaylı bilgi almak için kullanılır. Otomatik tamamlama (autocomplete) özellikleri de bu API üzerinden sağlanır.
* Directions API: İki veya daha fazla konum arasında yol tarifleri oluşturmak için kullanılır.
API’leri etkinleştirmek için:
1. GCP konsolunda, sol menüden “API’ler ve Hizmetler” > “Kitaplık” seçeneğine gidin.
2. Arama çubuğunu kullanarak yukarıda belirtilen API’leri arayın (örneğin, “Maps JavaScript API”).
3. Her bir API’nin sayfasına giderek “Etkinleştir” butonuna tıklayın.
API Anahtarı Oluşturma ve Kısıtlama
API’leri etkinleştirdikten sonra, uygulamanızın bu API’lere erişebilmesi için bir API anahtarı oluşturmanız gerekir. Bu anahtar, uygulamanızın kimliğini doğrular ve API kullanımınızı takip etmenizi sağlar.
API anahtarı oluşturmak için:
1. GCP konsolunda, sol menüden “API’ler ve Hizmetler” > “Kimlik Bilgileri” seçeneğine gidin.
2. “Kimlik Bilgileri Oluştur” butonuna tıklayın ve açılır menüden “API anahtarı”nı seçin.
3. API anahtarınız oluşturulacak ve size gösterilecektir. Bu anahtarı kopyalayın.
Güvenlik Notu: API anahtarınızı herkesle paylaşmamalısınız. Özellikle client-side uygulamalarda kullanıldığında, API anahtarınızı kısıtlamak, yetkisiz kullanımı önlemek için hayati önem taşır.
API anahtarınızı kısıtlamak için:
1. “Kimlik Bilgileri” sayfasında, yeni oluşturduğunuz API anahtarının yanındaki düzenleme (kalem) simgesine tıklayın.
2. “Uygulama kısıtlamaları” bölümünde “HTTP yönlendiriciler (web siteleri)” seçeneğini işaretleyin.
3. “Web sitesi kısıtlamaları” altında, uygulamanızın çalıştığı alan adlarını ekleyin (örneğin, .yourdomain.com/ veya geliştirme ortamı için http://localhost:3000/*).
4. “API kısıtlamaları” bölümünde “Anahtarı kısıtla” seçeneğini işaretleyin ve sadece uygulamanızın kullanacağı API’leri seçin (örneğin, Maps JavaScript API).
5. Değişiklikleri kaydetmek için “Kaydet” butonuna tıklayın.
Bu adımları tamamladıktan sonra, React uygulamanızda Google Haritalar API’sini kullanmaya hazırsınız.
React Uygulamasında Temel Kurulum
Google Haritalar API’sini React uygulamanıza entegre etmek için öncelikle temel bir React projesi oluşturmanız ve gerekli kütüphaneleri yüklemeniz gerekmektedir.
Yeni Bir React Projesi Oluşturma
Eğer mevcut bir React projeniz yoksa, Create React App veya Vite gibi araçlarla hızlıca yeni bir proje oluşturabilirsiniz:
npx create-react-app my-map-app
cd my-map-app
Veya Vite ile:
npm create vite@latest my-map-app -- --template react
cd my-map-app
npm install
Gerekli Paketlerin Kurulumu
React uygulamalarında Google Haritalar API’sini entegre etmek için birkaç farklı kütüphane mevcuttur. Bu makalede en popüler ve esnek kütüphanelerden ikisi olan @react-google-maps/api ve google-map-react üzerinde duracağız.
1. @react-google-maps/api Kütüphanesini Kurulumu:
Bu kütüphane, Google Maps JavaScript API’sinin React’e özgü bir sarmalayıcısıdır (wrapper). Google’ın kendi API’sini React bileşenleri olarak kullanmanızı sağlar ve en güncel özelliklere erişim sunar.
npm install @react-google-maps/api
veya
yarn add @react-google-maps/api2. google-map-react Kütüphanesini Kurulumu (Alternatif):
Bu kütüphane, daha çok özel işaretçiler ve harita üzerinde tamamen özelleştirilmiş bileşenler oluşturmak istediğinizde kullanışlıdır. Kendi DOM yapısını kullanarak harita üzerinde React bileşenleri render etmenizi sağlar.
npm install google-map-react
veya
yarn add google-map-reactBu makalede öncelikle @react-google-maps/api kütüphanesini kullanarak entegrasyonu detaylı bir şekilde inceleyeceğiz, çünkü Google’ın kendi API’siyle daha doğrudan bir etkileşim sunar ve genellikle daha güncel kalır. Ardından google-map-react kütüphanesine de kısaca değineceğiz.
@react-google-maps/api Kütüphanesini Kullanarak Entegrasyon
@react-google-maps/api kütüphanesi, Google Maps JavaScript API’sini React bileşenleri olarak sarmalar. Bu, harita ve üzerindeki öğeleri React’in deklaratif yapısıyla yönetmeyi kolaylaştırır.
LoadScript Bileşeni ile API Yükleme
Google Haritalar API’si, harita bileşenleri render edilmeden önce yüklenmelidir. LoadScript bileşeni bu işlemi sizin için yönetir. API anahtarınızı ve gerekli kütüphaneleri (örneğin places, geometry) bu bileşene iletirsiniz.
import React from 'react';
import { GoogleMap, LoadScript } from '@react-google-maps/api';
const containerStyle = {
width: '100%',
height: '400px'
};
const center = {
lat: -3.745,
lng: -38.523
};
function MyMapComponent() {
const libraries = ['places']; // İhtiyaç duyduğunuz kütüphaneleri buraya ekleyin
return (
{ / Harita üzerindeki diğer bileşenler buraya gelecek / }
);
}
export default MyMapComponent;LoadScript bileşeni, API yüklendiğinde isLoaded durumunu günceller. Haritanızı bu durum true olduğunda render etmek, hata oluşmasını engeller. Genellikle GoogleMap bileşeni LoadScript‘in çocuk bileşeni olarak kullanıldığında bu durum otomatik olarak yönetilir.
GoogleMap Bileşeni ile Harita Oluşturma
GoogleMap bileşeni, haritanın kendisini render etmek için kullanılır. Temel olarak mapContainerStyle (haritanın boyutları), center (haritanın başlangıç merkezi koordinatları) ve zoom (başlangıç yakınlaştırma seviyesi) gibi prop’lar alır.
// Yukarıdaki örnekteki gibi MyMapComponent içinde
{/ Diğer bileşenler /}
Harita Özelliklerini Yapılandırma (Merkez, Yakınlaştırma Seviyesi, Stiller)
GoogleMap bileşeni, haritanın görünümünü ve davranışını özelleştirmek için birçok prop sunar:
* options: Harita kontrolleri (yakınlaştırma, pan, sokak görünümü vb.), harita türü, stil gibi gelişmiş seçenekleri ayarlamak için kullanılır.
* mapTypeId: Haritanın türünü belirler (örneğin, google.maps.MapTypeId.ROADMAP, SATELLITE, HYBRID, TERRAIN).
* onLoad: Harita yüklendiğinde tetiklenen bir callback fonksiyonu. Harita nesnesine erişmek için kullanışlıdır.
* onUnmount: Harita bileşeni DOM’dan kaldırıldığında tetiklenen bir callback. Bellek sızıntılarını önlemek için harita nesnesini temizlemek için kullanılabilir.
Örnek: Harita kontrollerini gizleme ve belirli bir harita türü ayarlama.
const mapOptions = {
zoomControl: false,
mapTypeControl: false,
scaleControl: false,
streetViewControl: false,
rotateControl: false,
fullscreenControl: false,
mapTypeId: 'satellite' // Uydu görünümü
};
function MyMapComponent() {
const [map, setMap] = React.useState(null);
const onLoad = React.useCallback(function callback(map) {
const bounds = new window.google.maps.LatLngBounds(center);
map.fitBounds(bounds); // Haritayı başlangıç merkezine göre sığdır
setMap(map);
}, []);
const onUnmount = React.useCallback(function callback(map) {
setMap(null);
}, []);
return (
{/ Diğer bileşenler /}
);
}İşaretçiler (Markers) Ekleme
Harita üzerinde belirli noktaları işaretlemek için Marker bileşeni kullanılır. position prop’u ile işaretçinin koordinatlarını belirtirsiniz.
import { GoogleMap, LoadScript, Marker } from '@react-google-maps/api';
const markers = [
{ lat: -3.745, lng: -38.523, title: 'Konum A' },
{ lat: -3.750, lng: -38.530, title: 'Konum B' }
];
function MyMapComponent() {
// ... (önceki kodlar)
return (
{markers.map((marker, index) => (
);
}Marker bileşenine onClick gibi olay dinleyicileri de ekleyebilirsiniz. Ayrıca icon prop’u ile özel işaretçi simgeleri de kullanabilirsiniz.
Bilgi Pencereleri (InfoWindows) Kullanımı
İşaretçilere tıklandığında veya fare üzerine gelindiğinde detaylı bilgi göstermek için InfoWindow bileşeni kullanılır. Genellikle bir işaretçiye bağlı olarak açılır ve kapanır.
import { GoogleMap, LoadScript, Marker, InfoWindow } from '@react-google-maps/api';
function MyMapComponent() {
const [activeMarker, setActiveMarker] = React.useState(null);
const handleActiveMarker = (marker) => {
if (marker === activeMarker) {
return;
}
setActiveMarker(marker);
};
return (
{markers.map(({ lat, lng, title }, index) => (
))}
);
}InfoWindow bileşeni, Marker bileşeninin çocuk öğesi olarak veya doğrudan GoogleMap bileşeninin çocuk öğesi olarak kullanılabilir. onCloseClick prop’u ile pencerenin kapatıldığında yapılacak işlemleri tanımlayabilirsiniz.
Harita Olaylarını Dinleme (Tıklama, Sürükleme vb.)
GoogleMap ve diğer harita bileşenleri, çeşitli olay dinleyicilerini prop olarak kabul eder. Bu, kullanıcı etkileşimlerine tepki vermenizi sağlar.
* onClick: Haritaya tıklandığında.
* onDragEnd: Harita sürüklendikten sonra bırakıldığında.
* onZoomChanged: Yakınlaştırma seviyesi değiştiğinde.
* onBoundsChanged: Haritanın görünür alanı değiştiğinde.
function MyMapComponent() {
const onMapClick = React.useCallback((event) => {
console.log('Haritaya tıklandı:', event.latLng.lat(), event.latLng.lng());
}, []);
const onMapDragEnd = React.useCallback(() => {
console.log('Harita sürüklendi.');
}, []);
return (
{/ ... /}
);
}Çizimler ve Katmanlar (Polylines, Polygons, Circles)
Harita üzerinde çizgiler, çokgenler veya daireler çizmek için Polyline, Polygon ve Circle bileşenlerini kullanabilirsiniz. Bu bileşenler, genellikle bir dizi koordinat (path prop’u) ve stil seçenekleri (options prop’u) alır.
import { GoogleMap, LoadScript, Polyline, Polygon, Circle } from '@react-google-maps/api';
const polylinePath = [
{ lat: -3.745, lng: -38.523 },
{ lat: -3.730, lng: -38.540 },
{ lat: -3.720, lng: -38.500 }
];
const polygonPath = [
{ lat: -3.760, lng: -38.560 },
{ lat: -3.770, lng: -38.570 },
{ lat: -3.780, lng: -38.550 },
{ lat: -3.760, lng: -38.560 }
];
const circleOptions = {
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35,
clickable: false,
draggable: false,
editable: false,
visible: true,
radius: 5000, // metre cinsinden
zIndex: 1
};
function MyMapComponent() {
return (
);
}Farklı Harita Türleri (Uydu, Arazi)
GoogleMap bileşeninin mapTypeId prop’unu kullanarak harita türünü kolayca değiştirebilirsiniz.
* roadmap: Varsayılan yol haritası görünümü.
* satellite: Uydu görüntüleri.
* hybrid: Uydu görüntüleri ve yol haritası etiketlerinin birleşimi.
* terrain: Arazi ve yükseklik bilgileri içeren fiziksel harita.
// mapTypeId: 'satellite' veya 'terrain' olarak ayarlayın
{/ ... /}
google-map-react Kütüphanesini Kullanarak Entegrasyon (Alternatif Yaklaşım)
google-map-react kütüphanesi, @react-google-maps/api‘den farklı bir yaklaşıma sahiptir. Harita üzerinde özel işaretçiler veya diğer React bileşenlerini render etmek için daha esnek bir yol sunar. Google Maps API’sini doğrudan DOM’a gömmek yerine, haritayı bir React bileşeni olarak sarar ve harita üzerinde render edilecek çocuk bileşenleri için bir Provider görevi görür.
Kurulum ve Temel Kullanım
Öncelikle kütüphaneyi kurun:
npm install google-map-react
veya
yarn add google-map-reactArdından temel harita bileşeninizi oluşturabilirsiniz:
import React from 'react';
import GoogleMapReact from 'google-map-react';
const AnyReactComponent = ({ text }) => {text}; // Özel işaretçi bileşeni
function MyGoogleMapReactComponent() {
const defaultProps = {
center: {
lat: 59.95,
lng: 30.33
},
zoom: 11
};
return (
console.log('Google Maps API yüklendi', map, maps)}
>
);
}
export default MyGoogleMapReactComponent;Burada AnyReactComponent adında basit bir div oluşturduk. GoogleMapReact bileşeninin çocukları olarak yerleştirilen bu bileşenler, lat ve lng prop’ları sayesinde harita üzerinde belirtilen koordinatlarda konumlandırılır.
Özel İşaretçiler Oluşturma
google-map-react‘in en güçlü yanlarından biri, harita üzerindeki işaretçileri tamamen React bileşenleri olarak tanımlayabilmenizdir. Bu, CSS ile tam kontrol ve React bileşenlerinin tüm yaşam döngüsü özelliklerinden faydalanma anlamına gelir.
const CustomMarker = ({ text, onClick }) => (
{text}
);
// ... MyGoogleMapReactComponent içinde
alert('Evime hoş geldiniz!')}
/>
google-map-react ve Performans
google-map-react, harita üzerindeki özel bileşenleri render ederken sanal DOM’u kullanır. Bu, çok sayıda dinamik işaretçiniz olduğunda performansı artırabilir. Ancak, çok sayıda karmaşık React bileşenini işaretçi olarak kullanmak yine de performans sorunlarına yol açabilir. Bu gibi durumlarda, işaretçi bileşenlerinizi React.memo ile sarmalamak veya shouldComponentUpdate yaşam döngüsü metodunu kullanmak faydalı olabilir.
Gelişmiş Konular ve Optimizasyon
Google Haritalar API’si, sadece harita göstermekten çok daha fazlasını sunar. Uygulamanızın ihtiyaçlarına göre çeşitli gelişmiş özelliklerini entegre edebilirsiniz.
Geocoding ve Reverse Geocoding
* Geocoding: Bir adres dizesini (örneğin, “1600 Amphitheatre Parkway, Mountain View, CA”) coğrafi koordinatlara (enlem ve boylam) dönüştürme işlemidir.
* Reverse Geocoding: Coğrafi koordinatları (enlem ve boylam) okunabilir bir adrese dönüştürme işlemidir.
Bu işlemler için Geocoding API kullanılır. @react-google-maps/api kütüphanesinde useJsApiLoader hook’u ve ardından new window.google.maps.Geocoder() kullanarak bu işlemleri gerçekleştirebilirsiniz.
import React, { useState, useCallback } from 'react';
import { GoogleMap, LoadScript } from '@react-google-maps/api';
function GeocodingExample() {
const [address, setAddress] = useState('');
const [coordinates, setCoordinates] = useState(null);
const [map, setMap] = useState(null);
const onMapLoad = useCallback((mapInstance) => {
setMap(mapInstance);
}, []);
const handleGeocode = () => {
if (!window.google || !map) return;
const geocoder = new window.google.maps.Geocoder();
geocoder.geocode({ address: address }, (results, status) => {
if (status === 'OK' && results[0]) {
const { lat, lng } = results[0].geometry.location;
setCoordinates({ lat: lat(), lng: lng() });
map.setCenter({ lat: lat(), lng: lng() });
map.setZoom(15);
} else {
alert('Geocoding başarısız: ' + status);
}
});
};
const handleReverseGeocode = () => {
if (!window.google || !map || !coordinates) return;
const geocoder = new window.google.maps.Geocoder();
geocoder.geocode({ location: coordinates }, (results, status) => {
if (status === 'OK' && results[0]) {
alert('Ters Geocoding Sonucu: ' + results[0].formatted_address);
} else {
alert('Ters Geocoding başarısız: ' + status);
}
});
};
return (
{coordinates && }
setAddress(e.target.value)}
placeholder="Adres girin"
/>
{coordinates && }
);
}Places API ve Otomatik Tamamlama (Autocomplete)
Places API, belirli bir konumdaki ilgi çekici yerleri (işletmeler, restoranlar, turistik yerler vb.) aramanızı ve detaylı bilgi almanızı sağlar. En popüler özelliklerinden biri, kullanıcı bir arama kutusuna yazarken yer isimlerini otomatik olarak tamamlamaktır.
@react-google-maps/api kütüphanesi, StandaloneSearchBox veya Autocomplete gibi bileşenleri doğrudan sağlamaz, ancak Google Maps JavaScript API’sinin google.maps.places.Autocomplete sınıfını kullanabilirsiniz.
import React, { useRef, useEffect, useState } from 'react';
import { LoadScript } from '@react-google-maps/api';
const libraries = ['places'];
function PlacesAutocomplete() {
const [place, setPlace] = useState(null);
const inputRef = useRef(null);
useEffect(() => {
if (!window.google || !inputRef.current) return;
const autocomplete = new window.google.maps.places.Autocomplete(
inputRef.current,
{ types: ['geocode', 'establishment'] } // Arama türlerini kısıtla
);
autocomplete.addListener('place_changed', () => {
const selectedPlace = autocomplete.getPlace();
setPlace(selectedPlace);
console.log('Seçilen Yer:', selectedPlace);
});
return () => {
// Bileşen kaldırıldığında dinleyiciyi temizle
window.google.maps.event.clearInstanceListeners(autocomplete);
};
}, []);
return (
{place && (
Seçilen Yer Bilgileri:
Adı: {place.name}
Adres: {place.formatted_address}
Lat: {place.geometry.location.lat()}, Lng: {place.geometry.location.lng()}
)}
);
}Yol Tarifi Hizmetleri (Directions Service)
İki veya daha fazla konum arasında yol tarifleri oluşturmak için Directions Service ve Directions Renderer kullanılır.
import React, { useState, useEffect } from 'react';
import { GoogleMap, LoadScript, DirectionsRenderer } from '@react-google-maps/api';
const center = { lat: 41.0082, lng: 28.9784 }; // İstanbul
function DirectionsExample() {
const [directionsResponse, setDirectionsResponse] = useState(null);
const origin = 'Sultanahmet, Istanbul';
const destination = 'Taksim Square, Istanbul';
useEffect(() => {
if (!window.google) return;
const directionsService = new window.google.maps.DirectionsService();
directionsService.route(
{
origin: origin,
destination: destination,
travelMode: window.google.maps.TravelMode.DRIVING, // Sürüş, Yürüme, Bisiklet, Toplu Taşıma
},
(result, status) => {
if (status === 'OK') {
setDirectionsResponse(result);
} else {
console.error(Directions request failed due to ${status});
}
}
);
}, []);
return (
{directionsResponse && (
)}
);
}Harita Stilleri ve Temaları
Google Haritalar, haritanın görsel görünümünü tamamen özelleştirmenize olanak tanır. JSON tabanlı stil nesneleri kullanarak yolların rengini, ilgi çekici yerlerin görünürlüğünü, su alanlarının stilini ve daha fazlasını değiştirebilirsiniz. Stil nesnelerini GoogleMap bileşeninin options prop’u içindeki styles özelliğine iletirsiniz.
const customMapStyles = [
{
featureType: 'poi', // İlgi çekici yerleri hedefle
stylers: [{ visibility: 'off' }] // Gizle
},
{
featureType: 'road', // Yolları hedefle
elementType: 'geometry',
stylers: [{ color: '#aaaaaa' }] // Gri yap
},
{
featureType: 'water', // Su alanlarını hedefle
stylers: [{ color: '#c9e0ed' }] // Açık mavi yap
}
// Daha fazla stil kuralı eklenebilir
];
function StyledMapComponent() {
return (
{/ ... /}
);
}Harita stilleri oluşturmak için Google’ın “Styled Maps” sihirbazını kullanabilirsiniz: [https://mapstyle.withgoogle.com/](https://mapstyle.withgoogle.com/)
Performans İpuçları (Lazy Loading, Memoization)
Büyük React uygulamalarında harita entegrasyonu performansı etkileyebilir.
* Lazy Loading (Tembel Yükleme): Harita bileşenini sadece ihtiyaç duyulduğunda yüklemek için React.lazy ve Suspense kullanın. Bu, başlangıç yükleme süresini azaltır.
import React, { Suspense, lazy } from 'react';
const LazyMap = lazy(() => import('./MyMapComponent')); // Harita bileşeninizin yolu
function App() {
return (
Harita yükleniyor...}>