Giriş
Bu eğitim, bir web sayfasına işaretçi içeren bir Google haritasını nasıl ekleyeceğinizi gösterir ekleyebilirsiniz. Bu eğiticiyi kullanarak oluşturacağınız haritayı aşağıda bulabilirsiniz. İki işaretleyici biri Mountain View, Kaliforniya'da, biri de Seattle, WA'da.
Başlayın
Bunlar, Google Haritalar API'larını kullanarak işaretçi içeren bir Google haritası HTML:
Web tarayıcısı gerekir. Google Chrome gibi iyi bilinen bir uygulama seçin (önerilir), Firefox, Safari veya Edge, desteklenen tarayıcıların listesine göz atın.
1. Adım: API anahtarı alın
Bu bölümde, Maps JavaScript API'yi kendi API anahtarınızı kullanarak oluşturun.
API anahtarı almak için şu adımları uygulayın:
Şuraya gidin: Google Cloud Console'da oturum açın.
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 kısıtlamaları). Not: Mevcut bir kısıtlanmamış API anahtarınız veya anahtarınız varsa söz konusu anahtarı kullanabilirsiniz.
Kota hırsızlığını önlemek ve API anahtarınızın güvenliğini sağlamak için bkz. API Anahtarlarını Kullanma.
Faturalandırmayı etkinleştir. Kullanım ve Faturalandırma'yı inceleyin konulu videomuzu izleyin.
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 verilmiştir:
<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>
Bir haritayı yüklemek için şunu içeren bir script
etiketi eklemeniz gerekir:
aşağıdaki örnekte gösterildiği gibi, Maps JavaScript API için bootstrap yükleyicisi
aşağıdaki snippet'i ekleyin (kendi API anahtarınızı ekleyin):
<script
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=maps,marker&v=beta" defer>
</script>
Spoiler uyarısı: JSFiddle'daki tamamlanmış örneği deneyin.
3. Adım: Bir harita ekleyin
Sayfaya bir Google haritası eklemek için gmp-map
HTML öğesini kopyalayıp yapıştırın
HTML sayfasının body
içinde:
<gmp-map center="37.4220656,-122.0840897" zoom="10" map-id="DEMO_MAP_ID" style="height: 400px"></gmp-map>
Bu işlem aşağıdaki haritayla sonuçlanır:
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 vegmp-map
önceki adım.
<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 zoom
ve center
öğelerini değiştirir.
parametrelerini gmp-map
üzerinde düzenleyin. Harita kimliği gerekli
(DEMO_MAP_ID
kullanılabilir).
İpuçları ve sorun giderme
- Haritayı özel stil ile özelleştirebilirsiniz.
- Uygulamanızı test edip çalıştırmak için web tarayıcınızda Geliştirici Araçları Konsolu'nu kodlayabilir, hata raporlarını okuyabilir ve kodunuzla ilgili sorunları çözebilirsiniz.
- Chrome'da konsolu açmak için aşağıdaki klavye kısayollarını kullanın:
Command+Option+J (Mac'te) veya Control+Üst Karakter+J (Windows'da). Enlem ve veri miktarını öğrenmek için aşağıdaki adımları Google Haritalar'da bir konumun boylam koordinatları.
- Google Haritalar'ı bir tarayıcıda açın.
- Harita üzerinde tam olarak ihtiyacınız olan konumu sağ tıklayın koordinatlar.
- Görüntülenen içerik menüsünden Burada ne var? seçeneğini belirleyin. Harita, ekranın alt kısmında bir kart gösterir. Enlemi bulma ve boylam koordinatlarını değiştirin.
Bir adresi enlem ve boylam koordinatlarına Coğrafi kodlama hizmeti. Geliştirici kılavuzlarında, Coğrafi Kodlama hizmetini kullanmaya başlama hakkında daha fazla bilgi edinin.
Tam örnek kod
Aşağıda, nihai harita ve bu işlem için kullanılan tam örnek kod verilmiştir eğiticidir.
<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>