Google Haritalar API'sini Entegre Etme: Adım Adım Kılavuz

Google Maps API, geliştiricilerin uygulamalarına Google Haritalar'ı gömmelerine ve haritaları özel ihtiyaçlarına göre özelleştirmelerine olanak tanıyan güçlü bir araçtır. API, coğrafi kodlama, yol tarifleri ve yerler dahil olmak üzere çok çeşitli özellikler sunarak, konuma dayalı uygulamalar oluşturmayı kolaylaştırır. Bu makalede, Google Maps API'sini nasıl kullanacağınız konusunda, ayrıntılı adım adım talimatlar ve örnek kodlarla kapsamlı bir rehber sunacağız.

Google Maps API'ye Başlarken

Google Maps API'ye başlamak için, Google Cloud Console'dan bir API anahtarı almanız gerekir. Yeni bir proje oluşturmak ve Maps JavaScript API'sini etkinleştirmek için şu adımları izleyin:

Google Cloud Console'a (https://console.cloud.google.com/) gidin ve Google hesabınızla oturum açın.
Yeni bir proje oluşturun veya mevcut bir projeyi seçin.
"APIs & Services" > "Library" bölümüne gidip "Maps JavaScript API" arayarak Maps JavaScript API'sini etkinleştirin. Projeniz için API'yi etkinleştirmek için "Enable" (Etkinleştir) seçeneğine tıklayın.
"APIs & Services" > "Credentials" bölümüne gidin ve "Create credentials" (Kimlik bilgileri oluştur) seçeneğine tıklayın. Kimlik bilgisi türü olarak "API key" (API anahtarı) seçeneğini belirleyin.
API anahtarını kopyalayın ve güvenli bir yerde saklayın, çünkü Maps JavaScript API'sini kullanmak için buna ihtiyacınız olacaktır.

Google Maps API Kullanarak Harita Gömme

Bir Google Haritasını web sayfanıza gömmek için, HTML dosyanıza Maps JavaScript API betiğini eklemeniz ve haritayı tutacak bir ID'ye sahip bir <div> öğesi oluşturmanız gerekir. İşte bir örnek:

<!DOCTYPE html>
<html>
  <head>
    <title>Embedding a Map</title>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
    <style>
      #map {
        height: 500px;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      function initMap() {
        const map = new google.maps.Map(document.getElementById("map"), {
          center: { lat: -34.397, lng: 150.644 },
          zoom: 8,
        });
      }
    </script>
  </body>
</html>

Bu örnekte, API anahtarımızla birlikte Maps JavaScript API betiğini ekliyoruz. Ayrıca, "map" kimliğine sahip bir <div> öğesi oluşturuyor ve CSS kullanarak yüksekliğini ve genişliğini ayarlıyoruz. Son olarak, yeni bir google.maps.Map nesnesi oluşturan ve haritanın merkezini ve yakınlaştırma düzeyini ayarlayan initMap() adlı bir işlev tanımlıyoruz.

Google Maps API ile İşaretleyiciler Ekleme

Haritanıza işaretleyiciler eklemek için, google.maps.Marker sınıfını kullanabilirsiniz. İşte bir örnek:

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });

  const marker = new google.maps.Marker({
    position: { lat: -34.397, lng: 150.644 },
    map: map,
    title: "Hello World!",
  });
}

Bu örnekte, yeni bir google.maps.Marker nesnesi oluşturuyor ve konumunu, haritasını ve başlığını belirtiyoruz. position özelliği, işaretleyicinin enlem ve boylamını belirten lat ve lng özelliklerine sahip bir nesnedir. map özelliği, işaretleyicinin ekleneceği haritayı belirtir ve title özelliği, işaretleyicinin üzerine gelindiğinde görüntülenmesi gereken metni belirtir.

Google Maps API ile Coğrafi Kodlama

Coğrafi kodlama, bir adresi veya konum adını enlem ve boylam koordinatlarına dönüştürme işlemidir. Coğrafi kodlama yapmak için google.maps.Geocoder sınıfını kullanabilirsiniz. İşte bir örnek:

function geocodeAddress() {
  const geocoder = new google.maps.Geocoder();
  const address = document.getElementById("address").value;

  geocoder.geocode({ address: address }, (results, status) => {
    if (status === "OK") {
      const map = new google.maps.Map(document.getElementById("map"), {
        center: results[0].geometry.location,
        zoom: 12,
      });

      const marker = new google.maps.Marker({
        position: results[0].geometry.location,
        map: map,
      });
    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });
}

Bu örnekte, yeni bir google.maps.Geocoder nesnesi oluşturuyor ve coğrafi kodlanacak adresi belirten bir nesneyle geocode() yöntemini çağırıyoruz. geocode() yöntemi, coğrafi kodlama isteğinin sonuçlarıyla çağrılan bir geri çağırma işlevi alır. Durum "OK" ise, coğrafi kodlayıcı tarafından döndürülen enlem ve boylam koordinatlarını kullanarak yeni bir harita ve işaretleyici oluşturuyoruz. Bir hata varsa, hata mesajını içeren bir uyarı görüntülüyoruz.

Google Maps API Kullanarak Yol Tarifi Alma

Google Maps API ayrıca, konumlar arasında rotalar hesaplamanıza olanak tanıyan yol tarifi işlevi de sağlar. İşte bir örnek:

function calculateRoute() {
  const directionsService = new google.maps.DirectionsService();
  const directionsRenderer = new google.maps.DirectionsRenderer();

  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });

  directionsRenderer.setMap(map);

  const request = {
    origin: document.getElementById("origin").value,
    destination: document.getElementById("destination").value,
    travelMode: google.maps.TravelMode.DRIVING,
  };

  directionsService.route(request, (result, status) => {
    if (status == "OK") {
      directionsRenderer.setDirections(result);
    } else {
      alert("Directions request failed due to " + status);
    }
  });
}

Bu örnekte, yol tarifi isteğini işlemek için yeni bir google.maps.DirectionsService nesnesi ve haritada yol tariflerini görüntülemek için bir google.maps.DirectionsRenderer nesnesi oluşturuyoruz. Daha sonra yeni bir harita oluşturuyor ve DirectionsRenderer'ı haritada yol tariflerini görüntüleyecek şekilde ayarlıyoruz. Başlangıç ve varış adreslerini ve seyahat modunu (bu durumda, sürüş) belirten bir request nesnesi oluşturuyoruz. Daha sonra, DirectionsService nesnesinin route() yöntemini, istek nesnesi ve bir geri çağırma işleviyle çağırıyoruz. Durum "OK" ise, yol tariflerini DirectionsRenderer nesnesinde ayarlıyoruz. Bir hata varsa, hata mesajını içeren bir uyarı görüntülüyoruz.

Google Maps API ile Yerleri Alın

Google Maps API ayrıca, yerleri aramanıza ve onlar hakkında bilgi almanıza olanak tanıyan bir yerler API'si sağlar. İşte bir örnek:

function searchPlaces() {
  const service = new google.maps.places.PlacesService(map);

  const request = {
    query: document.getElementById("query").value,
    fields: ["name", "geometry"],
  };

  service.findPlaceFromQuery(request, (results, status) => {
    if (status === google.maps.places.PlacesServiceStatus.OK) {
      for (let i = 0; i < results.length; i++) {
        createMarker(results[i]);
      }

      map.setCenter(results[0].geometry.location);
    }
  });
}

function createMarker(place) {
  const marker = new google.maps.Marker({
    map: map,
    position: place.geometry.location,
  });

  google.maps.event.addListener(marker, "click", () => {
    infowindow.setContent(place.name);
    infowindow.open(map, this);
  });
}

Bu örnekte, yeni bir google.maps.places.PlacesService nesnesi oluşturuyor ve arama sorgusunu ve her yer için alınacak alanları belirten bir request nesnesi tanımlıyoruz. Daha sonra, PlacesService nesnesinin findPlaceFromQuery() yöntemini, istek nesnesi ve bir geri çağırma işleviyle çağırıyoruz. Durum "OK" ise, sonuçları döngüye alıyor ve createMarker() işlevini kullanarak her yer için bir işaretleyici oluşturuyoruz. Ayrıca, haritanın merkezini ilk sonucun konumuna ayarlıyoruz. createMarker() işlevi, yeni bir google.maps.Marker nesnesi oluşturur ve işaretleyiciye bir tıklama olay dinleyicisi ekler. İşaretleyici tıklandığında, yerin adını içeren bir bilgi penceresi görüntüler.

API Çağrıları için Apidog Kullanma

Diyelim ki bir hava durumu API'sinden veri getiren bir React.js uygulaması oluşturuyorsunuz. İşte Apidog'u API çağrılarını yönetmek için nasıl kullanabileceğiniz:

Adım 1: Apidog'u açın ve yeni bir istek oluşturun.

Adım 2: Test düzenleyicisinde, API uç noktanızın URL'sini girin, HTTP yöntemini seçin ve ihtiyacınız olan tüm başlıkları, parametreleri veya gövde verilerini ekleyin. Örneğin, daha önce oluşturduğumuz basit bir mesaj döndüren rotayı test edebilirsiniz:

Adım 3: Gönder düğmesine tıklayın ve testinizin sonucunu görün. Durum kodunu, yanıt süresini ve API'nizin yanıt gövdesini görmelisiniz. Örneğin, şuna benzer bir şey görmelisiniz:

Apidog, web hizmetlerinizin kalitesini, güvenilirliğini ve performansını sağlamanıza yardımcı olduğundan, API'lerinizi test etmek için harika bir araçtır. Ayrıca, API'lerinizi test etmek için herhangi bir kod yazmanıza veya herhangi bir yazılım yüklemenize gerek olmadığından, size zaman ve çaba tasarrufu sağlar. Sadece tarayıcınızı kullanabilir ve Apidog'un kullanıcı dostu arayüzünün ve özelliklerinin keyfini çıkarabilirsiniz.

Sonuç

Bu makalede, Google Maps API'sini nasıl kullanacağınız konusunda, ayrıntılı adım adım talimatlar ve örnek kodlarla kapsamlı bir rehber sunduk. Bir harita gömme, işaretleyiciler ekleme, coğrafi kodlama, yol tarifleri ve yerleri ele aldık. Bu bilgiyle, Google Maps API'sini kullanarak güçlü konuma dayalı uygulamalar oluşturabilmelisiniz.

💡

Ve unutmayın; API geliştirmenizi yükseltmeyi hedefliyorsanız, Apidog'u deneyin. Bu sağlam araç, API projelerinizi ve ötesini geliştirmek için tasarlanmıştır. Ücretsiz edinin ve iş akışınızı nasıl optimize edebileceğini ve verimliliğinizi nasıl artırabileceğini keşfedin.

button