Giriş

Google Haritalar, Google tarafından sağlanan ve çok çeşitli yapılandırma ayarlarını destekleyen bir harita hizmetidir. Google Haritalar'ı uygulamanıza eklemek, kullanıcılara bir sokak adresi veya koordinatlardan daha fazla bağlamsal bilgi sağlayabilir.

Bu eğitici, Google Haritalar API'sini React bileşenlerinize entegre etmeyi ve web sitenizde haritaları görüntülemenizi sağlamayı amaçlamaktadır.

Önkoşullar

Bu öğreticiyi tamamlamak için şunlara ihtiyacınız olacak:

  • Node.js
  • React JavaScript Framework'e başlangıç seviyesinde de olsa alışkanlık.
  • Bir Google Haritalar JavasScript API Anahtarı .
    • Bu, bir Google hesabı, Google Cloud Platform Console'da oturum açmayı, yeni bir proje oluşturmayı ve proje için Google Haritalar JavasScript API'sini etkinleştirmeyi gerektirir.

Not: Google Haritalar API'sini kullanırken "Yalnızca geliştirme amaçlı" mesajlarından kaçınmak için, geçerli bir kredi kartı sağlamanız ve Google Cloud Projesi için bir Faturalandırma hesabıyla ilişkilendirmeniz gerekir, ancak bu eğitici için gerekli değildir.

Bu öğretici Node v14.2.0, npm v6.14.5, react v16.13.1 ve google-maps-react v.2.0.6 ile yapılmıştır.

Adım 1 - Bir React Uygulaması Kurmak

İlk olarak, bir terminal penceresinde npx kullanmak için create-react-app komutunu çalıştıralım. 

npx create-react-app react-googlemaps

Ardından, yeni proje dizininize gidelim; 

cd react-googlemaps

Herhangi bir kod eklemeden önce, bağımlılıklarınızı şununla kuralım:

npm install [email protected]

Not: İsteğe bağlı olarak, bu noktada src dizininizdeki gereksiz dosyaları ve içe aktarmaları kaldırabilirsiniz. Eğer kaldırırsanız import için index.css de index.html bir yapı hatasına önlemek için index.css dosyasını ayrıca kaldırmalısınız.

Bu noktada, google-maps-react kitaplıkla birlikte bir React uygulamanız var. Artık uygulamanızda haritaları kullanarak geliştirebilirsiniz.

Adım 2 - Map ve GoogleApiWrapper Kullanımı

2. Adımda artık kullanımla geçiyoruz, App.js dosyanızı düzenlemeniz ve aşağıdaki kodu, bir Google Haritası yükleyecek bileşeninizle değiştirmeniz gerekecektir.

App.js'i açın :

nano src/App.js

Ardından aşağıdaki kodları ekleyelim; 

import React, { Component } from 'react';
import { Map, GoogleApiWrapper } from 'google-maps-react';

const mapStyles = {
  width: '100%',
  height: '100%'
};

export class MapContainer extends Component {
  render() {
    return (
      <Map
        google={this.props.google}
        zoom={14}
        style={mapStyles}
        initialCenter={
          {
            lat: -1.2884,
            lng: 36.8233
          }
        }
      />
    );
  }
}

export default GoogleApiWrapper({
  apiKey: 'YOUR_GOOGLE_MAPS_API_KEY_GOES_HERE'
})(MapContainer);

Not: YOUR_GOOGLE_MAPS_API_KEY_GOES_HERE yazan yere Google Maps JavaScript'i API anahtarınızla değiştirin.

Uyarı: API anahtarınızı genel depolara (GitHub gibi) kaydettiğiniz herhangi bir dosyaya kaydetmekten kaçının, çünkü daha sonra başkaları tarafından sizin istemediğiniz amaçlar için kullanılabilir.

Temel bir Google Haritasının işlevselliği için ihtiyacınız olan tüm kod budur.

Map Bileşen bazı isteğe bağlı sahne alır:

  • style - CSS stil nesnesi
  • zoom - haritanın merkezine daha sıkı bir odaklamayı temsil eden sayı değeri
  • initialCenter - enlem ve boylam koordinatlarını içeren bir nesne

Bu örnekte, tanımlıyorsunuz:

  • 100% genişlik ve 100% yüksekliğe sahip bir CSS stil nesnesi
  • zoom : yakınlaştırma değeri 14
  • ve -1.2884, 36.8233 (Kenya, Nairobi'deki Kenyatta Uluslararası Kongre Merkezi) herhangi bir lat,lng değerleri. 

Terminalinizi açın ve uygulamanızı çalıştırın:

npm start

Ve haritanın tarayıcıya yüklendiğinden emin olun:

Tarayıcıda harita görüntüleme

GoogleApiWrapper Bir olan Yüksek Dereceden Bileşen (HOC) Google API'leri etrafında sarıcı sağlar. Alternatif olarak, GoogleApiWrapper HOC, sarmalanmış bileşenin props'ları ile çağrılacak ve aşağıdaki gibi yapılandırma nesnesini döndürmesi gereken bir işlev iletilerek yapılandırılabilir:

export default GoogleApiWrapper(
  (props) => ({
    apiKey: props.apiKey
  }
))(MapContainer)

Bu noktada, React uygulamanızda bir Google Haritanız var. Artık Google Haritalar'ın diğer özelliklerini uygulamayı geliştirebiliriz.

Önümüzdeki süreçte bu makaleyi biraz daha zenginleştirip harita üzerinde bazı işlemler gerçekleştirmeyi anlatmayı planlıyorum. 

Takipte kalın...