Web Siteleri için Google Map Api Kullanımı

Harita uygulamaları oluşturmak için kullanılan yöntemlerden biri olan Google Map Api ile kolayca projeleriniz için harita uygulamaları oluşturabilirsiniz. Aslında google haricinde farklı platformlarda var ama nedense Google adı geçinde durum değişiyor. Neyse… Şimdi bu ilk yazıda iframe kullanmadan web sitemize harita verilerini nasıl çekebiliriz bunu görelim.

1. Adım

Harita verileri yaratmak için öncelikle bir api anahtarına ihtiyacımız olacak. Bunu Google Api Console ‘dan edinebilirsiniz. Öncelikle proje oluşturup kontrol panelinden api tipini seçtikten sonra anahtarı alabilirsiniz. Api tipi olarak Google Maps Javascript API seçeneğini seçmelisiniz.

2. Adım

Api anahtarını aldıktan sonra artık haritamızı oluşturabiliriz. Bunun için temel birkaç satır koda ihtiyacımız var.

HTML

Bu html koduna haritamızı yerleştireceğiz.

<div id="map"></div>

Css

Haritamızı ekranda görebilmek için birkaç CSS düzenlemesi yapalım.

#map {
    width: 100%;
    height: 300px;
}

JavaScript

Burada ise map api sınıfını başlatmamız gerekiyor.

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

Burada “center” metodu haritada görünecek koordinatları belirtiyor “zoom” ise belirtilen koordinatlara yakınlaşma oranını temsil ediyor.

Son olarak ise kütüphanemizi dahil edelim. Key alanına daha önce aldığımız api anahtarını da dahil ediyoruz tabi 🙂

<script src="https://maps.googleapis.com/maps/api/js?key=SizinApiAnahtariniz&callback=initMap"></script>

Sonuç Olarak

Kodlarımızı toparlayacak olursak aşağıdaki gibi sonuç ortaya çıkıyor.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Google Map Api</title>
        <style>
            #map {
                width: 100%;
                height: 300px;
            }
        </style>
    </head>
    <body>
        <div id="map"></div>
        <script>
            var map;
            function initMap() {
                map = new google.maps.Map(document.getElementById('map'), {
                    center: {
                        lat: -34.397,
                        lng: 150.644
                    },
                    zoom: 8
                });
            }
        </script>
        <script async defer src="https://maps.googleapis.com/maps/api/js?key=SizinApiAnahtariniz&callback=initMap"></script>
    </body>
</html>

Canlı örneği gör

Yayınlayan

Uğur Özgen

2012 yılından beri web tasarım ile ilgileniyorum. Son 3 senedir profesyonel anlamda bu işi yapıyorum. İşimi çok seviyorum ve her zaman güncel kalmaya çalışıyorum.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir