Giriş
Bu eğitimde, HTML kullanılarak bir web sayfasına işaretçi içeren Google haritası ekleme işlemi gösterilmektedir. Bu eğitimde oluşturacağınız harita aşağıda verilmiştir. Biri Kaliforniya'nın Mountain View şehrinde, diğeri de Washington'un Seattle şehrinde olmak üzere iki işaretçi yerleştirilir.
Başlayın
HTML kullanarak işaretçi içeren bir Google haritası oluşturmak için uygulayacağımız adımlar şunlardır:
Web tarayıcısı gerekir. Desteklenen tarayıcılar listesinden platformunuza göre Google Chrome (önerilen), Firefox, Safari veya Edge gibi bilinen bir tarayıcı seçin.
1. Adım: API anahtarı alın
Bu bölümde, kendi API anahtarınızı kullanarak uygulamanızın Maps JavaScript API ile nasıl kimlik doğrulaması yapacağı açıklanmaktadır.
API anahtarı almak için aşağıdaki 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ı alın (ve API anahtarı kısıtlamalarını ayarlayın). Not: Mevcut bir kısıtlanmamış API anahtarınız veya tarayıcı kısıtlamaları olan bir anahtarınız varsa bu anahtarı kullanabilirsiniz.
Kota hırsızlığını önlemek ve API anahtarınızın güvenliğini sağlamak için API Anahtarları'nı Kullanma başlıklı makaleyi inceleyin.
Faturalandırmayı etkinleştirin. Daha fazla bilgi için Kullanım ve Faturalandırma başlıklı makaleyi inceleyin.
Artık API anahtarınızı kullanmaya hazırsınız.
2. Adım: HTML, CSS ve JS oluşturun
Aşağıda, temel bir HTML web sayfasının kodu yer almaktadır:
<html> <head> <title>Add a Map with Markers using HTML</title> <!-- TODO: Add bootstrap script tag. --> </head> <body> <!-- TODO: Add a map with markers. --> </body> </html>
Harita yüklemek için aşağıdaki snippet'te gösterildiği gibi Maps JavaScript API için önyükleme yükleyicisini içeren bir script
etiketi eklemeniz gerekir (kendi API anahtarınızı ekleyin):
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=maps,marker&v=beta" defer ></script>
Spoiler uyarısı: Tamamlanmış örneği JSFiddle'da deneyin.
3. Adım: Harita ekleyin
Sayfaya Google haritası eklemek için gmp-map
HTML öğesini kopyalayıp HTML sayfasının body
içine yapıştırın:
<gmp-map center="37.4220656,-122.0840897" zoom="10" map-id="DEMO_MAP_ID" style="height: 400px"></gmp-map>
Bu işlem sonucunda aşağıdaki harita oluşturulur:
Oluşturduğunuz haritanın merkezinde San Jose metropol alanı yer alır.
4. Adım: İşaretçi ekleyin
Haritaya işaretçi eklemek için gmp-advanced-marker
HTML öğesini kullanın.
Aşağıdaki snippet'i kopyalayın ve önceki adımda eklediğiniz gmp-map
öğesinin tamamını yapıştırın.
<gmp-map center="43.4142989,-124.2301242" zoom="4" map-id="DEMO_MAP_ID" style="height: 400px" > <gmp-advanced-marker position="37.4220656,-122.0840897" title="Mountain View, CA" ></gmp-advanced-marker> <gmp-advanced-marker position="47.648994,-122.3503845" title="Seattle, WA" ></gmp-advanced-marker> </gmp-map>
Önceki kod, iki işaretçi ekler ve bu işaretçileri daha iyi göstermek için gmp-map
üzerindeki zoom
ve center
parametrelerini değiştirir. Gelişmiş İşaretçileri kullanmak için harita kimliği gerekir (DEMO_MAP_ID
kullanılabilir).
İpuçları ve sorun giderme
- Haritayı özel stil ile özelleştirebilirsiniz.
- Kodunuzu test etmek ve ç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.
- Chrome'da konsolu açmak için aşağıdaki klavye kısayollarını kullanın:
Command+Option+J (Mac'te) veya Control+Shift+J (Windows'ta). Google Haritalar'da bir konumun enlem ve boylam koordinatlarını almak için aşağıdaki adımları uygulayın.
- Google Haritalar'ı bir tarayıcıda açın.
- Koordinatlarını öğrenmek istediğiniz konumu haritada sağ tıklayın.
- Görüntülenen içerik menüsünden Burada ne var?'ı seçin. Harita, ekranın alt kısmında bir kart gösterir. Kartın son satırında 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ında, coğrafi kodlama hizmetini kullanmaya başlama hakkında ayrıntılı bilgi verilmektedir.
Tam örnek kod
Aşağıda, nihai harita ve bu eğitimde kullanılan örnek kodun tamamı verilmiştir.
<html> <head> <title>Add a Map with Markers using HTML</title> <link rel="stylesheet" type="text/css" href="./style.css" /> <script type="module" src="./index.js"></script> </head> <body> <gmp-map center="43.4142989,-124.2301242" zoom="4" map-id="DEMO_MAP_ID" style="height: 400px" > <gmp-advanced-marker position="37.4220656,-122.0840897" title="Mountain View, CA" ></gmp-advanced-marker> <gmp-advanced-marker position="47.648994,-122.3503845" title="Seattle, WA" ></gmp-advanced-marker> </gmp-map> <!-- The `defer` attribute causes the script 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. See https://developers.google.com/maps/documentation/javascript/load-maps-js-api for more information. --> <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&libraries=maps,marker&v=beta" defer ></script> </body> </html>