Giriş
Bu eğitim, bir web sayfasına işaretçi içeren basit bir Google haritasını nasıl ekleyeceğinizi göstermektedir. HTML ve CSS başlangıç ve orta seviyesi ile JavaScript bilgisi az olan kullanıcılar için uygundur. Haritalar oluşturma konusunda ileri düzey bir kılavuz için geliştirici kılavuzunu okuyun.
Bu eğiticiyi kullanarak oluşturacağınız harita aşağıda verilmiştir. İşaretçi, Uluru-Kata Tjuta Ulusal Parkı'ndaki Uluru'da (Ayers Kayası olarak da bilinir) bulunur.
Aşağıdaki bölümde, bu eğiticide haritayı oluşturmak için ihtiyacınız olan kodun tamamı gösterilmektedir.
TypeScript
// Initialize and add the map function initMap(): void { // The location of Uluru const uluru = { lat: -25.344, lng: 131.031 }; // The map, centered at Uluru const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { zoom: 4, center: uluru, } ); // The marker, positioned at Uluru const marker = new google.maps.Marker({ position: uluru, map: map, }); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
// Initialize and add the map function initMap() { // The location of Uluru const uluru = { lat: -25.344, lng: 131.031 }; // The map, centered at Uluru const map = new google.maps.Map(document.getElementById("map"), { zoom: 4, center: uluru, }); // The marker, positioned at Uluru const marker = new google.maps.Marker({ position: uluru, map: map, }); } window.initMap = initMap;
CSS
/* Set the size of the div element that contains the map */ #map { height: 400px; /* The height is 400 pixels */ width: 100%; /* The width is the width of the web page */ }
HTML
<html> <head> <title>Add Map</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <h3>My Google Maps Demo</h3> <!--The div element for the map --> <div id="map"></div> <!-- The `defer` attribute causes the callback to execute after the full HTML document has been parsed. For non-blocking uses, avoiding race conditions, and consistent behavior across browsers, consider loading using Promises with https://www.npmjs.com/package/@googlemaps/js-api-loader. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly" defer ></script> </body> </html>
Örneği Deneyin
Başlarken
Web sayfanızda bir işaretçi ile Google haritası oluşturmanın üç adımı vardır:
Bir web tarayıcısına ihtiyacınız vardır. Desteklenen tarayıcılar listesinden platformunuza göre Google Chrome (önerilir), Firefox, Safari veya Edge gibi iyi bilinen bir tarayıcıyı seçin.
1. Adım: Bir HTML sayfası oluşturun
Temel HTML web sayfasının kodu şöyledir:
<!DOCTYPE html> <!-- @license Copyright 2019 Google LLC. All Rights Reserved. SPDX-License-Identifier: Apache-2.0 --> <html> <head> <title>Add Map</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <h3>My Google Maps Demo</h3> <!--The div element for the map --> <div id="map"></div> <!-- The `defer` attribute causes the callback to execute after the full HTML document has been parsed. For non-blocking uses, avoiding race conditions, and consistent behavior across browsers, consider loading using Promises with https://www.npmjs.com/package/@googlemaps/js-api-loader. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly" defer ></script> </body> </html>
Bunun, başlık seviyesi üç (h3
) ve tek bir div
öğesine sahip çok temel bir sayfa olduğunu unutmayın. Web sayfasına istediğiniz içeriği ekleyebilirsiniz.
Kodu anlama
Aşağıdaki kod, bir head ve body içeren bir HTML sayfası oluşturur.
<html> <head> </head> <body> </body> </html>
Aşağıdaki kodu kullanarak haritanın üst kısmına üç adet başlık seviyesi ekleyebilirsiniz.
<h3>My Google Maps Demo</h3>
Aşağıdaki kod, Google haritanız için sayfanın bir alanını tanımlar.
<!--The div element for the map --> <div id="map"></div>
Eğiticinin bu aşamasında, henüz bir harita eklemediğiniz için div
yalnızca gri bir blok olarak görünür. Aşağıdaki kod, div
boyutunu ve rengini belirleyen CSS'yi açıklamaktadır.
/** * @license * Copyright 2019 Google LLC. All Rights Reserved. * SPDX-License-Identifier: Apache-2.0 */ /* Set the size of the div element that contains the map */ #map { height: 400px; /* The height is 400 pixels */ width: 100%; /* The width is the width of the web page */ }
Yukarıdaki kodda style
öğesi, haritanızın div
boyutunu ayarlar. Haritanın görünür olması için div
genişliğini ve yüksekliğini 0 pikselden büyük olarak ayarlayın. Bu durumda, div
cihazınızın web sayfasının genişliğini gösterecek şekilde 400 piksel yüksekliğe ve% 100 genişliğe ayarlanır.
2. Adım: İşaretçisi olan bir harita ekleyin
Bu bölümde, Maps JavaScript API'yi web sayfanıza nasıl yükleyeceğiniz ve üzerinde işaretçi bulunan bir harita eklemek için API'yi kullanan kendi JavaScript'inizi nasıl yazacağınız gösterilmektedir.
TypeScript
// Initialize and add the map function initMap(): void { // The location of Uluru const uluru = { lat: -25.344, lng: 131.031 }; // The map, centered at Uluru const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { zoom: 4, center: uluru, } ); // The marker, positioned at Uluru const marker = new google.maps.Marker({ position: uluru, map: map, }); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
// Initialize and add the map function initMap() { // The location of Uluru const uluru = { lat: -25.344, lng: 131.031 }; // The map, centered at Uluru const map = new google.maps.Map(document.getElementById("map"), { zoom: 4, center: uluru, }); // The marker, positioned at Uluru const marker = new google.maps.Marker({ position: uluru, map: map, }); } window.initMap = initMap;
CSS
/* Set the size of the div element that contains the map */ #map { height: 400px; /* The height is 400 pixels */ width: 100%; /* The width is the width of the web page */ }
HTML
<html> <head> <title>Add Map</title> <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <h3>My Google Maps Demo</h3> <!--The div element for the map --> <div id="map"></div> <!-- The `defer` attribute causes the callback to execute after the full HTML document has been parsed. For non-blocking uses, avoiding race conditions, and consistent behavior across browsers, consider loading using Promises with https://www.npmjs.com/package/@googlemaps/js-api-loader. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly" defer ></script> </body> </html>
Örneği Deneyin
Kodu anlama
script
, aşağıdaki kodda, belirtilen URL'den API'yi yükler.
<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
Yukarıdaki kodda callback
parametresi, API yüklendikten sonra initMap
işlevini yürütür. async
özelliği, tarayıcı yüklenirken API'nin yüklendiği sırada sayfanızın geri kalanını ayrıştırmaya devam etmesine olanak tanır. Sayfa yüklendiğinde tarayıcı duraklatılır ve komut dosyasını hemen yürütür. key
parametresi, API anahtarınızı içerir.
Kendi API anahtarınızı daha sonra alma talimatları için 3. Adım: API anahtarı alma bölümüne bakın.
Aşağıdaki kod, web sayfası yüklendiğinde haritayı başlatan ve ekleyen initMap
işlevini içerir. initMap
işlevini içeren kendi JavaScript'inizi eklemek için bir script
etiketi kullanın.
function initMap() {}
Web sayfasında div
haritasını bulmak için document.getElementById()
işlevini ekleyin.
Aşağıdaki kod yeni bir Google Haritalar nesnesi oluşturur ve ortaya merkez ile yakınlaştırma düzeyini içeren özellikler ekler. Diğer mülk seçenekleri ile ilgili belgelere göz atın.
TypeScript
// The location of Uluru const uluru = { lat: -25.344, lng: 131.031 }; // The map, centered at Uluru const map = new google.maps.Map( document.getElementById("map") as HTMLElement, { zoom: 4, center: uluru, } );
JavaScript
// The location of Uluru const uluru = { lat: -25.344, lng: 131.031 }; // The map, centered at Uluru const map = new google.maps.Map(document.getElementById("map"), { zoom: 4, center: uluru, });
Yukarıdaki kodda new google.maps.Map()
, yeni bir Google Haritalar nesnesi oluşturur. center
özelliği, API'ye haritanın hangi noktaya yerleştirileceğini bildirir.
Enlem/boylam koordinatları alma veya bir adresi coğrafi koordinatlara dönüştürme hakkında daha fazla bilgi edinin.
zoom
özelliği haritanın yakınlaştırma düzeyini belirtir. Yakınlaştırma: 0 en düşük yakınlaştırmadır
ve tüm dünyayı görüntüler. Yakınlaştırma değerini, dünyaya daha yüksek çözünürlüklerde yakınlaştırmak için
daha yüksek bir değere ayarlayın.
Aşağıdaki kod, haritaya bir işaretçi yerleştirir. position
özelliği, işaretçinin konumunu ayarlar.
TypeScript
// The marker, positioned at Uluru const marker = new google.maps.Marker({ position: uluru, map: map, });
JavaScript
// The marker, positioned at Uluru const marker = new google.maps.Marker({ position: uluru, map: map, });
İşaretçiler hakkında daha fazla bilgi edinin:
- İşaretçiyi erişilebilir hale getirme
- Vektör tabanlı simgeler içeren işaretçiler
- İşaretçi animasyonları
3. Adım: Bir API anahtarı alın
Bu bölümde, kendi API anahtarınızı kullanarak uygulamanızın Maps JavaScript API için nasıl doğrulanacağı açıklanmaktadır.
API anahtarı almak için şu adımları uygulayın:
Google Cloud Console'a gidin.
Proje oluşturun veya seçin.
API'yi ve ilgili hizmetleri etkinleştirmek için Devam'ı tıklayın.
Kimlik bilgileri sayfasında bir API anahtarı edinin (ve API anahtarı kısıtlamalarını ayarlayın). Not: Sınırsız bir API anahtarınız veya tarayıcı kısıtlamaları olan bir anahtarınız varsa bu anahtarı kullanabilirsiniz.
Kotanın çalınmasını önlemek ve API anahtarınızı güvence altına almak için API Anahtarlarını Kullanma bölümüne bakın.
Faturalandırmayı etkinleştirin. Daha fazla bilgi için Kullanım ve Faturalandırma bölümüne bakın.
Bu eğiticinin tüm kodunu bu sayfadan metin düzenleyicinize kopyalayın.
URL'deki
key
parametresinin değerini, kendi API anahtarınızla (az önce aldığınız API anahtarı) değiştirin.<script async src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"> </script>
Bu dosyayı
index.html
ile biten,.html
ile biten bir adla kaydedin.Masaüstünüzden tarayıcınıza sürükleyerek HTML dosyasını bir web tarayıcısında yükleyin. Alternatif olarak, dosyayı çift tıklamak çoğu işletim sisteminde çalışır.
İpuçları ve sorun giderme
- Haritayı özelleştirmek için stil ve özellikler gibi seçenekleri değiştirebilirsiniz. Haritaları özelleştirme hakkında daha fazla bilgi için stil ve harita çizimi ile ilgili kılavuzları okuyun.
- Kodunuzu test edip çalıştırmak, hata raporlarını okumak ve kodunuzla ilgili sorunları çözmek için web tarayıcınızdaki Geliştirici Araçları Konsolu'nu kullanın.
- Konsolu Chrome'da açmak için aşağıdaki klavye kısayollarını kullanın:
Komut+Option+J (Mac'te) veya Control+Üst Karakter+J (Windows'da). Google Haritalar'daki bir konumun enlem ve boylam koordinatlarını görmek için aşağıdaki adımları izleyin.
- Google Haritalar'ı bir tarayıcıda açın.
- Haritada koordinat istediğiniz konumu sağ tıklayın.
- Görüntülenen içerik menüsünden Burada ne var? seçeneğini belirleyin. Haritada, ekranın alt kısmında bir kart görüntülenir. Kartın son satırındaki enlem ve boylam koordinatlarını bulun.
Coğrafi kodlama hizmetini kullanarak bir adresi enlem ve boylam koordinatlarına dönüştürebilirsiniz. Geliştirici kılavuzları, Coğrafi Kodlama hizmetini kullanmaya başlama hakkında ayrıntılı bilgi sağlar.