React ile Google Maps Örnekleri

React-google-maps

create-react-app <Proje_adı>

src klasörünün altına components kalsörü oluşturalım.

Components klasörünede Map.js dosyamızı oluşturalım. Burada bileşenimizi oluşturacağız.

Oluşturduğumuz Map bileşenini App.js te gösterelim.

Basit bir taslak hazırlayarak işe başlayalım.

npm add react-google-maps

Bu komut ile react-google-maps kütüphanesini yüklüyoruz.Yükleme tamamlandıktan sonra withGoogleMap ve GoogleMap HOC(higher order componenets) 'react-google-maps' kütüphanesinden getirerek Haritamızı oluşturalım.

Daha sonra index.html dosyamızda google api anahtarımızı tanımlayacağımız bir script yazıyoruz. 

withScriptjs ile kullanım

index.html dosyasında <script> içerisinde api referansını göndermek yerin withScriptjs higher order componentını kullanabiliriz.