Modern web uygulamalar\u0131, kullan\u0131c\u0131 deneyimini zenginle\u015ftirmek ve ger\u00e7ek d\u00fcnya verileriyle etkile\u015fim kurmak i\u00e7in s\u0131k\u00e7a co\u011frafi konum tabanl\u0131 hizmetlere ihtiya\u00e7 duyar. Bu ba\u011flamda, Google Haritalar API’si, d\u00fcnya \u00fczerindeki herhangi bir konumu g\u00f6rselle\u015ftirmek, yol tarifleri sunmak, ilgi \u00e7ekici yerleri bulmak ve \u00e7ok daha fazlas\u0131n\u0131 yapmak i\u00e7in g\u00fc\u00e7l\u00fc ve kapsaml\u0131 bir ara\u00e7 seti sunar. React ise, bile\u015fen tabanl\u0131 yap\u0131s\u0131, sanal DOM’u ve deklaratif programlama yakla\u015f\u0131m\u0131 sayesinde dinamik ve etkile\u015fimli kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmak i\u00e7in pop\u00fcler bir JavaScript k\u00fct\u00fcphanesidir. React’in mod\u00fcler yap\u0131s\u0131, Google Haritalar API’sinin karma\u015f\u0131k \u00f6zelliklerini y\u00f6netilebilir ve yeniden kullan\u0131labilir bile\u015fenlere ay\u0131rmay\u0131 kolayla\u015ft\u0131r\u0131r. Bu iki teknolojinin birle\u015fimi, geli\u015ftiricilere hem performansl\u0131 hem de zengin \u00f6zelliklere sahip harita tabanl\u0131 uygulamalar olu\u015fturma imkan\u0131 sunar.<\/p>\n
React uygulamalar\u0131na Google Haritalar entegrasyonu, harita bile\u015fenlerinin uygulaman\u0131n geri kalan\u0131yla sorunsuz bir \u015fekilde etkile\u015fim kurmas\u0131n\u0131 sa\u011flar. \u00d6rne\u011fin, bir kullan\u0131c\u0131n\u0131n konumunu g\u00f6steren bir harita, ayn\u0131 zamanda belirli bir b\u00f6lgedeki i\u015fletmeleri listeleyen bir yan panel ile senkronize edilebilir. Bu entegrasyon, emlak uygulamalar\u0131ndan seyahat planlay\u0131c\u0131lara, teslimat hizmetlerinden etkinlik buluculara kadar geni\u015f bir yelpazedeki uygulamalar i\u00e7in temel bir gerekliliktir. Bu makale, React projelerinize Google Haritalar API’sini nas\u0131l entegre edece\u011finizi ad\u0131m ad\u0131m a\u00e7\u0131klayacak, farkl\u0131 yakla\u015f\u0131mlar\u0131 inceleyecek ve en iyi uygulamalar\u0131 sunacakt\u0131r.<\/p>\n
Google Haritalar API’sini kullanmaya ba\u015flamadan \u00f6nce, Google Cloud Platform (GCP) \u00fczerinde baz\u0131 temel ayarlamalar\u0131 yapman\u0131z gerekmektedir. Bu ad\u0131mlar, API’ye eri\u015fim izni almak ve kullan\u0131m\u0131n\u0131z\u0131 y\u00f6netmek i\u00e7in kritik \u00f6neme sahiptir.<\/p>\n
\u0130lk olarak, Google Cloud Console’a (console.cloud.google.com) giri\u015f yapman\u0131z ve yeni bir proje olu\u015fturman\u0131z gerekmektedir. E\u011fer mevcut bir projeniz varsa onu da kullanabilirsiniz. Yeni proje olu\u015fturmak i\u00e7in:
\n1. GCP konsolunda, sayfan\u0131n \u00fcst k\u0131sm\u0131ndaki proje se\u00e7icisinden “Yeni Proje” butonuna t\u0131klay\u0131n.
\n2. Projenize anlaml\u0131 bir ad verin (\u00f6rne\u011fin, “React Harita Uygulamas\u0131”) ve bir kurulu\u015f se\u00e7in (iste\u011fe ba\u011fl\u0131).
\n3. “Olu\u015ftur” butonuna t\u0131klay\u0131n. Projenizin olu\u015fturulmas\u0131 birka\u00e7 dakika s\u00fcrebilir.<\/p>\n
Projenizi olu\u015fturduktan sonra, Google Haritalar API’sinin hangi hizmetlerini kullanaca\u011f\u0131n\u0131za karar vermeniz ve bu hizmetleri projeniz i\u00e7in etkinle\u015ftirmeniz gerekir. En yayg\u0131n kullan\u0131lan API’ler \u015funlard\u0131r: API’leri etkinle\u015ftirmek i\u00e7in: API’leri etkinle\u015ftirdikten sonra, uygulaman\u0131z\u0131n bu API’lere eri\u015febilmesi i\u00e7in bir API anahtar\u0131 olu\u015fturman\u0131z gerekir. Bu anahtar, uygulaman\u0131z\u0131n kimli\u011fini do\u011frular ve API kullan\u0131m\u0131n\u0131z\u0131 takip etmenizi sa\u011flar.<\/p>\n API anahtar\u0131 olu\u015fturmak i\u00e7in: G\u00fcvenlik Notu:<\/strong> API anahtar\u0131n\u0131z\u0131 herkesle payla\u015fmamal\u0131s\u0131n\u0131z. \u00d6zellikle client-side uygulamalarda kullan\u0131ld\u0131\u011f\u0131nda, API anahtar\u0131n\u0131z\u0131 k\u0131s\u0131tlamak, yetkisiz kullan\u0131m\u0131 \u00f6nlemek i\u00e7in hayati \u00f6nem ta\u015f\u0131r. Bu ad\u0131mlar\u0131 tamamlad\u0131ktan sonra, React uygulaman\u0131zda Google Haritalar API’sini kullanmaya haz\u0131rs\u0131n\u0131z.<\/p>\n Google Haritalar API’sini React uygulaman\u0131za entegre etmek i\u00e7in \u00f6ncelikle temel bir React projesi olu\u015fturman\u0131z ve gerekli k\u00fct\u00fcphaneleri y\u00fcklemeniz gerekmektedir.<\/p>\n E\u011fer mevcut bir React projeniz yoksa, React uygulamalar\u0131nda Google Haritalar API’sini entegre etmek i\u00e7in birka\u00e7 farkl\u0131 k\u00fct\u00fcphane mevcuttur. Bu makalede en pop\u00fcler ve esnek k\u00fct\u00fcphanelerden ikisi olan 1. 2. Bu makalede \u00f6ncelikle Google Haritalar API’si, harita bile\u015fenleri render edilmeden \u00f6nce y\u00fcklenmelidir. \u00d6rnek: Harita kontrollerini gizleme ve belirli bir harita t\u00fcr\u00fc ayarlama.<\/p>\n Harita \u00fczerinde belirli noktalar\u0131 i\u015faretlemek i\u00e7in \u0130\u015faret\u00e7ilere t\u0131kland\u0131\u011f\u0131nda veya fare \u00fczerine gelindi\u011finde detayl\u0131 bilgi g\u00f6stermek i\u00e7in Bu bir bilgi penceresidir.<\/p>\n <\/div>\n <\/InfoWindow>\n ) : null}\n <\/Marker>\n ))}\n <\/GoogleMap>\n <\/LoadScript>\n );\n}<\/code><\/pre>\n * Harita \u00fczerinde \u00e7izgiler, \u00e7okgenler veya daireler \u00e7izmek i\u00e7in \u00d6ncelikle k\u00fct\u00fcphaneyi kurun:<\/p>\n Ard\u0131ndan temel harita bile\u015feninizi olu\u015fturabilirsiniz:<\/p>\n Burada Google Haritalar API’si, sadece harita g\u00f6stermekten \u00e7ok daha fazlas\u0131n\u0131 sunar. Uygulaman\u0131z\u0131n ihtiya\u00e7lar\u0131na g\u00f6re \u00e7e\u015fitli geli\u015fmi\u015f \u00f6zelliklerini entegre edebilirsiniz.<\/p>\n * Geocoding:<\/strong> Bir adres dizesini (\u00f6rne\u011fin, “1600 Amphitheatre Parkway, Mountain View, CA”) co\u011frafi koordinatlara (enlem ve boylam) d\u00f6n\u00fc\u015ft\u00fcrme i\u015flemidir. Bu i\u015flemler i\u00e7in
\n* Maps JavaScript API:<\/strong> Web taray\u0131c\u0131lar\u0131nda dinamik haritalar g\u00f6r\u00fcnt\u00fclemek ve harita \u00fczerinde etkile\u015fim kurmak i\u00e7in temel API’dir.
\n* Geocoding API:<\/strong> Adresleri co\u011frafi koordinatlara (enlem\/boylam) ve tersini d\u00f6n\u00fc\u015ft\u00fcrmek i\u00e7in kullan\u0131l\u0131r.
\n* Places API:<\/strong> Belirli bir konumdaki ilgi \u00e7ekici yerleri (i\u015fletmeler, restoranlar vb.) aramak ve detayl\u0131 bilgi almak i\u00e7in kullan\u0131l\u0131r. Otomatik tamamlama (autocomplete) \u00f6zellikleri de bu API \u00fczerinden sa\u011flan\u0131r.
\n* Directions API:<\/strong> \u0130ki veya daha fazla konum aras\u0131nda yol tarifleri olu\u015fturmak i\u00e7in kullan\u0131l\u0131r.<\/p>\n
\n1. GCP konsolunda, sol men\u00fcden “API’ler ve Hizmetler” > “Kitapl\u0131k” se\u00e7ene\u011fine gidin.
\n2. Arama \u00e7ubu\u011funu kullanarak yukar\u0131da belirtilen API’leri aray\u0131n (\u00f6rne\u011fin, “Maps JavaScript API”).
\n3. Her bir API’nin sayfas\u0131na giderek “Etkinle\u015ftir” butonuna t\u0131klay\u0131n.<\/p>\nAPI Anahtar\u0131 Olu\u015fturma ve K\u0131s\u0131tlama<\/h4>\n
\n1. GCP konsolunda, sol men\u00fcden “API’ler ve Hizmetler” > “Kimlik Bilgileri” se\u00e7ene\u011fine gidin.
\n2. “Kimlik Bilgileri Olu\u015ftur” butonuna t\u0131klay\u0131n ve a\u00e7\u0131l\u0131r men\u00fcden “API anahtar\u0131”n\u0131 se\u00e7in.
\n3. API anahtar\u0131n\u0131z olu\u015fturulacak ve size g\u00f6sterilecektir. Bu anahtar\u0131 kopyalay\u0131n.<\/p>\n
\nAPI anahtar\u0131n\u0131z\u0131 k\u0131s\u0131tlamak i\u00e7in:
\n1. “Kimlik Bilgileri” sayfas\u0131nda, yeni olu\u015fturdu\u011funuz API anahtar\u0131n\u0131n yan\u0131ndaki d\u00fczenleme (kalem) simgesine t\u0131klay\u0131n.
\n2. “Uygulama k\u0131s\u0131tlamalar\u0131” b\u00f6l\u00fcm\u00fcnde “HTTP y\u00f6nlendiriciler (web siteleri)” se\u00e7ene\u011fini i\u015faretleyin.
\n3. “Web sitesi k\u0131s\u0131tlamalar\u0131” alt\u0131nda, uygulaman\u0131z\u0131n \u00e7al\u0131\u015ft\u0131\u011f\u0131 alan adlar\u0131n\u0131 ekleyin (\u00f6rne\u011fin, .yourdomain.com\/<\/em><\/code> veya geli\u015ftirme ortam\u0131 i\u00e7in http:\/\/localhost:3000\/*<\/code>).
\n4. “API k\u0131s\u0131tlamalar\u0131” b\u00f6l\u00fcm\u00fcnde “Anahtar\u0131 k\u0131s\u0131tla” se\u00e7ene\u011fini i\u015faretleyin ve sadece uygulaman\u0131z\u0131n kullanaca\u011f\u0131 API’leri se\u00e7in (\u00f6rne\u011fin, Maps JavaScript API).
\n5. De\u011fi\u015fiklikleri kaydetmek i\u00e7in “Kaydet” butonuna t\u0131klay\u0131n.<\/p>\nReact Uygulamas\u0131nda Temel Kurulum<\/h3>\n
Yeni Bir React Projesi Olu\u015fturma<\/h4>\n
Create React App<\/code> veya Vite gibi ara\u00e7larla h\u0131zl\u0131ca yeni bir proje olu\u015fturabilirsiniz:<\/p>\nnpx create-react-app my-map-app\ncd my-map-app\nVeya Vite ile:<\/h2>\n
npm create vite@latest my-map-app -- --template react<\/h2>\n
cd my-map-app<\/h2>\n
npm install<\/code><\/pre>\n<\/h2>\n
Gerekli Paketlerin Kurulumu<\/h4>\n
@react-google-maps\/api<\/code> ve google-map-react<\/code> \u00fczerinde duraca\u011f\u0131z.<\/p>\n@react-google-maps\/api<\/code> K\u00fct\u00fcphanesini Kurulumu:<\/strong>
\nBu k\u00fct\u00fcphane, Google Maps JavaScript API’sinin React’e \u00f6zg\u00fc bir sarmalay\u0131c\u0131s\u0131d\u0131r (wrapper). Google’\u0131n kendi API’sini React bile\u015fenleri olarak kullanman\u0131z\u0131 sa\u011flar ve en g\u00fcncel \u00f6zelliklere eri\u015fim sunar.<\/p>\nnpm install @react-google-maps\/api\nveya<\/h2>\nyarn add @react-google-maps\/api<\/code><\/pre>\n
google-map-react<\/code> K\u00fct\u00fcphanesini Kurulumu (Alternatif):<\/strong>
\nBu k\u00fct\u00fcphane, daha \u00e7ok \u00f6zel i\u015faret\u00e7iler ve harita \u00fczerinde tamamen \u00f6zelle\u015ftirilmi\u015f bile\u015fenler olu\u015fturmak istedi\u011finizde kullan\u0131\u015fl\u0131d\u0131r. Kendi DOM yap\u0131s\u0131n\u0131 kullanarak harita \u00fczerinde React bile\u015fenleri render etmenizi sa\u011flar.<\/p>\nnpm install google-map-react\nveya<\/h2>\nyarn add google-map-react<\/code><\/pre>\n
@react-google-maps\/api<\/code> k\u00fct\u00fcphanesini kullanarak entegrasyonu detayl\u0131 bir \u015fekilde inceleyece\u011fiz, \u00e7\u00fcnk\u00fc Google’\u0131n kendi API’siyle daha do\u011frudan bir etkile\u015fim sunar ve genellikle daha g\u00fcncel kal\u0131r. Ard\u0131ndan google-map-react<\/code> k\u00fct\u00fcphanesine de k\u0131saca de\u011finece\u011fiz.<\/p>\n@react-google-maps\/api<\/code> K\u00fct\u00fcphanesini Kullanarak Entegrasyon<\/h3>\n@react-google-maps\/api<\/code> k\u00fct\u00fcphanesi, Google Maps JavaScript API’sini React bile\u015fenleri olarak sarmalar. Bu, harita ve \u00fczerindeki \u00f6\u011feleri React’in deklaratif yap\u0131s\u0131yla y\u00f6netmeyi kolayla\u015ft\u0131r\u0131r.<\/p>\nLoadScript<\/code> Bile\u015feni ile API Y\u00fckleme<\/h4>\nLoadScript<\/code> bile\u015feni bu i\u015flemi sizin i\u00e7in y\u00f6netir. API anahtar\u0131n\u0131z\u0131 ve gerekli k\u00fct\u00fcphaneleri (\u00f6rne\u011fin places<\/code>, geometry<\/code>) bu bile\u015fene iletirsiniz.<\/p>\nimport React from 'react';\nimport { GoogleMap, LoadScript } from '@react-google-maps\/api';\n\nconst containerStyle = {\n width: '100%',\n height: '400px'\n};\n\nconst center = {\n lat: -3.745,\n lng: -38.523\n};\n\nfunction MyMapComponent() {\n const libraries = ['places']; \/\/ \u0130htiya\u00e7 duydu\u011funuz k\u00fct\u00fcphaneleri buraya ekleyin\n\n return (\n LoadScript<\/code> bile\u015feni, API y\u00fcklendi\u011finde isLoaded<\/code> durumunu g\u00fcnceller. Haritan\u0131z\u0131 bu durum true<\/code> oldu\u011funda render etmek, hata olu\u015fmas\u0131n\u0131 engeller. Genellikle GoogleMap<\/code> bile\u015feni LoadScript<\/code>‘in \u00e7ocuk bile\u015feni olarak kullan\u0131ld\u0131\u011f\u0131nda bu durum otomatik olarak y\u00f6netilir.<\/p>\nGoogleMap<\/code> Bile\u015feni ile Harita Olu\u015fturma<\/h4>\nGoogleMap<\/code> bile\u015feni, haritan\u0131n kendisini render etmek i\u00e7in kullan\u0131l\u0131r. Temel olarak mapContainerStyle<\/code> (haritan\u0131n boyutlar\u0131), center<\/code> (haritan\u0131n ba\u015flang\u0131\u00e7 merkezi koordinatlar\u0131) ve zoom<\/code> (ba\u015flang\u0131\u00e7 yak\u0131nla\u015ft\u0131rma seviyesi) gibi prop’lar al\u0131r.<\/p>\n\/\/ Yukar\u0131daki \u00f6rnekteki gibi MyMapComponent i\u00e7inde\nHarita \u00d6zelliklerini Yap\u0131land\u0131rma (Merkez, Yak\u0131nla\u015ft\u0131rma Seviyesi, Stiller)<\/h4>\n
GoogleMap<\/code> bile\u015feni, haritan\u0131n g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc ve davran\u0131\u015f\u0131n\u0131 \u00f6zelle\u015ftirmek i\u00e7in bir\u00e7ok prop sunar:
\n* options<\/code>: Harita kontrolleri (yak\u0131nla\u015ft\u0131rma, pan, sokak g\u00f6r\u00fcn\u00fcm\u00fc vb.), harita t\u00fcr\u00fc, stil gibi geli\u015fmi\u015f se\u00e7enekleri ayarlamak i\u00e7in kullan\u0131l\u0131r.
\n* mapTypeId<\/code>: Haritan\u0131n t\u00fcr\u00fcn\u00fc belirler (\u00f6rne\u011fin, google.maps.MapTypeId.ROADMAP<\/code>, SATELLITE<\/code>, HYBRID<\/code>, TERRAIN<\/code>).
\n* onLoad<\/code>: Harita y\u00fcklendi\u011finde tetiklenen bir callback fonksiyonu. Harita nesnesine eri\u015fmek i\u00e7in kullan\u0131\u015fl\u0131d\u0131r.
\n* onUnmount<\/code>: Harita bile\u015feni DOM’dan kald\u0131r\u0131ld\u0131\u011f\u0131nda tetiklenen bir callback. Bellek s\u0131z\u0131nt\u0131lar\u0131n\u0131 \u00f6nlemek i\u00e7in harita nesnesini temizlemek i\u00e7in kullan\u0131labilir.<\/p>\nconst mapOptions = {\n zoomControl: false,\n mapTypeControl: false,\n scaleControl: false,\n streetViewControl: false,\n rotateControl: false,\n fullscreenControl: false,\n mapTypeId: 'satellite' \/\/ Uydu g\u00f6r\u00fcn\u00fcm\u00fc\n};\n\nfunction MyMapComponent() {\n const [map, setMap] = React.useState(null);\n\n const onLoad = React.useCallback(function callback(map) {\n const bounds = new window.google.maps.LatLngBounds(center);\n map.fitBounds(bounds); \/\/ Haritay\u0131 ba\u015flang\u0131\u00e7 merkezine g\u00f6re s\u0131\u011fd\u0131r\n setMap(map);\n }, []);\n\n const onUnmount = React.useCallback(function callback(map) {\n setMap(null);\n }, []);\n\n return (\n \u0130\u015faret\u00e7iler (Markers) Ekleme<\/h4>\n
Marker<\/code> bile\u015feni kullan\u0131l\u0131r. position<\/code> prop’u ile i\u015faret\u00e7inin koordinatlar\u0131n\u0131 belirtirsiniz.<\/p>\nimport { GoogleMap, LoadScript, Marker } from '@react-google-maps\/api';\n\nconst markers = [\n { lat: -3.745, lng: -38.523, title: 'Konum A' },\n { lat: -3.750, lng: -38.530, title: 'Konum B' }\n];\n\nfunction MyMapComponent() {\n \/\/ ... (\u00f6nceki kodlar)\n\n return (\n Marker ${marker.title} t\u0131kland\u0131!<\/code>)}\n \/>\n ))}\n <\/GoogleMap>\n <\/LoadScript>\n );\n}<\/code><\/pre>\nMarker<\/code> bile\u015fenine onClick<\/code> gibi olay dinleyicileri de ekleyebilirsiniz. Ayr\u0131ca icon<\/code> prop’u ile \u00f6zel i\u015faret\u00e7i simgeleri de kullanabilirsiniz.<\/p>\nBilgi Pencereleri (InfoWindows) Kullan\u0131m\u0131<\/h4>\n
InfoWindow<\/code> bile\u015feni kullan\u0131l\u0131r. Genellikle bir i\u015faret\u00e7iye ba\u011fl\u0131 olarak a\u00e7\u0131l\u0131r ve kapan\u0131r.<\/p>\nimport { GoogleMap, LoadScript, Marker, InfoWindow } from '@react-google-maps\/api';\n\nfunction MyMapComponent() {\n const [activeMarker, setActiveMarker] = React.useState(null);\n\n const handleActiveMarker = (marker) => {\n if (marker === activeMarker) {\n return;\n }\n setActiveMarker(marker);\n };\n\n return (\n {title}<\/h3>\n
InfoWindow<\/code> bile\u015feni, Marker<\/code> bile\u015feninin \u00e7ocuk \u00f6\u011fesi olarak veya do\u011frudan GoogleMap<\/code> bile\u015feninin \u00e7ocuk \u00f6\u011fesi olarak kullan\u0131labilir. onCloseClick<\/code> prop’u ile pencerenin kapat\u0131ld\u0131\u011f\u0131nda yap\u0131lacak i\u015flemleri tan\u0131mlayabilirsiniz.<\/p>\nHarita Olaylar\u0131n\u0131 Dinleme (T\u0131klama, S\u00fcr\u00fckleme vb.)<\/h4>\n
GoogleMap<\/code> ve di\u011fer harita bile\u015fenleri, \u00e7e\u015fitli olay dinleyicilerini prop olarak kabul eder. Bu, kullan\u0131c\u0131 etkile\u015fimlerine tepki vermenizi sa\u011flar.<\/p>\nonClick<\/code>: Haritaya t\u0131kland\u0131\u011f\u0131nda.
\n* onDragEnd<\/code>: Harita s\u00fcr\u00fcklendikten sonra b\u0131rak\u0131ld\u0131\u011f\u0131nda.
\n* onZoomChanged<\/code>: Yak\u0131nla\u015ft\u0131rma seviyesi de\u011fi\u015fti\u011finde.
\n* onBoundsChanged<\/code>: Haritan\u0131n g\u00f6r\u00fcn\u00fcr alan\u0131 de\u011fi\u015fti\u011finde.<\/p>\nfunction MyMapComponent() {\n const onMapClick = React.useCallback((event) => {\n console.log('Haritaya t\u0131kland\u0131:', event.latLng.lat(), event.latLng.lng());\n }, []);\n\n const onMapDragEnd = React.useCallback(() => {\n console.log('Harita s\u00fcr\u00fcklendi.');\n }, []);\n\n return (\n \u00c7izimler ve Katmanlar (Polylines, Polygons, Circles)<\/h4>\n
Polyline<\/code>, Polygon<\/code> ve Circle<\/code> bile\u015fenlerini kullanabilirsiniz. Bu bile\u015fenler, genellikle bir dizi koordinat (path<\/code> prop’u) ve stil se\u00e7enekleri (options<\/code> prop’u) al\u0131r.<\/p>\nimport { GoogleMap, LoadScript, Polyline, Polygon, Circle } from '@react-google-maps\/api';\n\nconst polylinePath = [\n { lat: -3.745, lng: -38.523 },\n { lat: -3.730, lng: -38.540 },\n { lat: -3.720, lng: -38.500 }\n];\n\nconst polygonPath = [\n { lat: -3.760, lng: -38.560 },\n { lat: -3.770, lng: -38.570 },\n { lat: -3.780, lng: -38.550 },\n { lat: -3.760, lng: -38.560 }\n];\n\nconst circleOptions = {\n strokeColor: '#FF0000',\n strokeOpacity: 0.8,\n strokeWeight: 2,\n fillColor: '#FF0000',\n fillOpacity: 0.35,\n clickable: false,\n draggable: false,\n editable: false,\n visible: true,\n radius: 5000, \/\/ metre cinsinden\n zIndex: 1\n};\n\nfunction MyMapComponent() {\n return (\n Farkl\u0131 Harita T\u00fcrleri (Uydu, Arazi)<\/h4>\n
GoogleMap<\/code> bile\u015feninin mapTypeId<\/code> prop’unu kullanarak harita t\u00fcr\u00fcn\u00fc kolayca de\u011fi\u015ftirebilirsiniz.
\n* roadmap<\/code>: Varsay\u0131lan yol haritas\u0131 g\u00f6r\u00fcn\u00fcm\u00fc.
\n* satellite<\/code>: Uydu g\u00f6r\u00fcnt\u00fcleri.
\n* hybrid<\/code>: Uydu g\u00f6r\u00fcnt\u00fcleri ve yol haritas\u0131 etiketlerinin birle\u015fimi.
\n* terrain<\/code>: Arazi ve y\u00fckseklik bilgileri i\u00e7eren fiziksel harita.<\/p>\n\/\/ mapTypeId: 'satellite' veya 'terrain' olarak ayarlay\u0131n\ngoogle-map-react<\/code> K\u00fct\u00fcphanesini Kullanarak Entegrasyon (Alternatif Yakla\u015f\u0131m)<\/h3>\ngoogle-map-react<\/code> k\u00fct\u00fcphanesi, @react-google-maps\/api<\/code>‘den farkl\u0131 bir yakla\u015f\u0131ma sahiptir. Harita \u00fczerinde \u00f6zel i\u015faret\u00e7iler veya di\u011fer React bile\u015fenlerini render etmek i\u00e7in daha esnek bir yol sunar. Google Maps API’sini do\u011frudan DOM’a g\u00f6mmek yerine, haritay\u0131 bir React bile\u015feni olarak sarar ve harita \u00fczerinde render edilecek \u00e7ocuk bile\u015fenleri i\u00e7in bir Provider<\/code> g\u00f6revi g\u00f6r\u00fcr.<\/p>\nKurulum ve Temel Kullan\u0131m<\/h4>\n
npm install google-map-react\nveya<\/h2>\nyarn add google-map-react<\/code><\/pre>\n
import React from 'react';\nimport GoogleMapReact from 'google-map-react';\n\nconst AnyReactComponent = ({ text }) => AnyReactComponent<\/code> ad\u0131nda basit bir div olu\u015fturduk. GoogleMapReact<\/code> bile\u015feninin \u00e7ocuklar\u0131 olarak yerle\u015ftirilen bu bile\u015fenler, lat<\/code> ve lng<\/code> prop’lar\u0131 sayesinde harita \u00fczerinde belirtilen koordinatlarda konumland\u0131r\u0131l\u0131r.<\/p>\n\u00d6zel \u0130\u015faret\u00e7iler Olu\u015fturma<\/h4>\n
google-map-react<\/code>‘in en g\u00fc\u00e7l\u00fc yanlar\u0131ndan biri, harita \u00fczerindeki i\u015faret\u00e7ileri tamamen React bile\u015fenleri olarak tan\u0131mlayabilmenizdir. Bu, CSS ile tam kontrol ve React bile\u015fenlerinin t\u00fcm ya\u015fam d\u00f6ng\u00fcs\u00fc \u00f6zelliklerinden faydalanma anlam\u0131na gelir.<\/p>\nconst CustomMarker = ({ text, onClick }) => (\n google-map-react<\/code> ve Performans<\/h4>\ngoogle-map-react<\/code>, harita \u00fczerindeki \u00f6zel bile\u015fenleri render ederken sanal DOM’u kullan\u0131r. Bu, \u00e7ok say\u0131da dinamik i\u015faret\u00e7iniz oldu\u011funda performans\u0131 art\u0131rabilir. Ancak, \u00e7ok say\u0131da karma\u015f\u0131k React bile\u015fenini i\u015faret\u00e7i olarak kullanmak yine de performans sorunlar\u0131na yol a\u00e7abilir. Bu gibi durumlarda, i\u015faret\u00e7i bile\u015fenlerinizi React.memo<\/code> ile sarmalamak veya shouldComponentUpdate<\/code> ya\u015fam d\u00f6ng\u00fcs\u00fc metodunu kullanmak faydal\u0131 olabilir.<\/p>\nGeli\u015fmi\u015f Konular ve Optimizasyon<\/h3>\n
Geocoding ve Reverse Geocoding<\/h4>\n
\n* Reverse Geocoding:<\/strong> Co\u011frafi koordinatlar\u0131 (enlem ve boylam) okunabilir bir adrese d\u00f6n\u00fc\u015ft\u00fcrme i\u015flemidir.<\/p>\nGeocoding API<\/code> kullan\u0131l\u0131r. @react-google-maps\/api<\/code> k\u00fct\u00fcphanesinde useJsApiLoader<\/code> hook’u ve ard\u0131ndan new window.google.maps.Geocoder()<\/code> kullanarak bu i\u015flemleri ger\u00e7ekle\u015ftirebilirsiniz.<\/p>\nimport React, { useState, useCallback } from 'react';\nimport { GoogleMap, LoadScript } from '@react-google-maps\/api';\n\nfunction GeocodingExample() {\n const [address, setAddress] = useState('');\n const [coordinates, setCoordinates] = useState(null);\n const [map, setMap] = useState(null);\n\n const onMapLoad = useCallback((mapInstance) => {\n setMap(mapInstance);\n }, []);\n\n const handleGeocode = () => {\n if (!window.google || !map) return;\n\n const geocoder = new window.google.maps.Geocoder();\n geocoder.geocode({ address: address }, (results, status) => {\n if (status === 'OK' && results[0]) {\n const { lat, lng } = results[0].geometry.location;\n setCoordinates({ lat: lat(), lng: lng() });\n map.setCenter({ lat: lat(), lng: lng() });\n map.setZoom(15);\n } else {\n alert('Geocoding ba\u015far\u0131s\u0131z: ' + status);\n }\n });\n };\n\n const handleReverseGeocode = () => {\n if (!window.google || !map || !coordinates) return;\n\n const geocoder = new window.google.maps.Geocoder();\n geocoder.geocode({ location: coordinates }, (results, status) => {\n if (status === 'OK' && results[0]) {\n alert('Ters Geocoding Sonucu: ' + results[0].formatted_address);\n } else {\n alert('Ters Geocoding ba\u015far\u0131s\u0131z: ' + status);\n }\n });\n };\n\n return (\n