Giriş
Bu eğitimde, işaretçiyle basit bir Google haritasını web'e nasıl ekleyeceğiniz gösterilmektedir sayfasını ziyaret edin. Başlangıç veya orta düzey HTML ve CSS bilgisine sahip kişilere uygundur. ve biraz JavaScript bilgim var.
Aşağıda, bu eğiticiyi kullanarak oluşturacağınız haritayı görebilirsiniz. İşaretçi şu konumda bulunuyor: Uluru (Ayers Kayası olarak da bilinir) Uluru-Kata Tjuta Ulusal Parkı'na 3 km uzaklıktadır.
Başlarken
Web sayfanızda işaretçi içeren bir Google haritası oluşturmanın üç adımı vardır:
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.
Aldığınız API anahtarını aşağıdaki snippet'e eklemek için "API_ANAHTARINIZ". Bootloader komut dosyası etiketini kopyalayıp kendi başınıza kullanmak için yapıştırın web sayfası.
<script> (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({ key: "YOUR_API_KEY", v: "weekly", // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.). // Add other bootstrap parameters as needed, using camel case. }); </script>
2. Adım: HTML sayfası oluşturun
Aşağıda, temel bir HTML web sayfasının kodu verilmiştir:
<!doctype html> <!-- @license Copyright 2019 Google LLC. All Rights Reserved. SPDX-License-Identifier: Apache-2.0 --> <html> <head> <title>Add Map</title> <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> <!-- prettier-ignore --> <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))}) ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script> </body> </html>
Bunun, başlık düzeyi üç (h3
) ve bir
tek bir div
öğesi. Web sayfasına istediğiniz içeriği ekleyebilirsiniz.
Kodu anlama
Örneğin bu aşamada şunları yaptık:
!DOCTYPE html
bildirimi kullanılarak uygulamayı HTML5 olarak tanımladı.- "map" adlı bir div öğesi oluşturuldu basılı tutun.
- Önyükleyici kullanılarak Maps JavaScript API yüklendi.
Uygulamanızı HTML5 olarak beyan edin
Web uygulamanızda gerçek bir DOCTYPE
tanımlamanızı öneririz.
Buradaki örneklerde,
aşağıda gösterildiği gibi basit HTML5 DOCTYPE
:
<!DOCTYPE html>
Mevcut tarayıcıların çoğu, bu DOCTYPE
ile tanımlanan içeriği oluşturur
"standartlar modunda" Bu da uygulamanızın daha hızlı
tarayıcılarla uyumlu
olduğundan emin olun. DOCTYPE
aynı zamanda zarifçe düşürülecek şekilde tasarlanmış;
anlamayan tarayıcılar bunu yoksayar ve "Quirks Modu"nu kullanır. -
yardımcı olur.
Quirks modunda çalışan bazı CSS'lerin
standartlar moduna girer. Özellikle, yüzdeye dayalı tüm boyutların
üst blok öğelerinden biri olabilir ve bu üst öğelerden herhangi biri
bir boyut belirttiğinde, bunların 0 x 0 piksel boyutunda oldukları varsayılır. Örneğin,
Bu nedenle aşağıdaki style
beyanını ekleriz:
<style> #map { height: 100%; } html, body { height: 100%; margin: 0; padding: 0; } </style>
Div öğesi oluşturma
Haritanın bir web sayfasında görüntülenebilmesi için, söz konusu sayfada yer ayırmamız gerekir. Genellikle
bunu, adlandırılmış bir div
öğesi oluşturup buna bir referans alarak yaparız.
öğesi, tarayıcının belge nesne modelinde (DOM) yer alır.
Aşağıdaki kod, Google haritanızda sayfanın bir alanını tanımlar.
<!--The div element for the map --> <div id="map"></div>
Eğiticinin bu aşamasında div
yalnızca gri bir blok olarak görünür, çünkü
henüz harita eklemediniz. Aşağıdaki kod,
div
cihazının boyutu ve rengi.
/* 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 için div
boyutunu ayarlar. Ayarlayın:
Haritanın görünür olması için genişliği ve yüksekliği 0 pikselden fazla olacak şekilde div
. Burada
durumda, div
öğesinin yüksekliği 400 piksel, görüntü genişliği% 100 olarak ayarlanmış
reklam öğesidir. Div'lerin genellikle genişliklerini aldığını unutmayın.
boş div'lerin yüksekliği genellikle 0 olur. Boş div'lerin yüksekliği ise genellikle 0'dır. Bunun için
Bu nedenle, div
için her zaman açıkça bir yükseklik ayarlamanız gerekir.
Maps JavaScript API'yi yükleme
Bootstrap yükleyici, Maps JavaScript API'yi yükleme için hazırlar
(importLibrary()
çağrılana kadar kitaplık yüklenmez).
<script> (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({ key: "YOUR_API_KEY", v: "weekly", // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.). // Add other bootstrap parameters as needed, using camel case. }); </script>
API anahtarı alma talimatları için 3. Adım: API anahtarı alın kendi API anahtarınız.
3. Adım: İşaretçisi olan bir harita ekleyin
Bu bölümde, Maps JavaScript API'yi web sitenize nasıl ve harita eklemek için API'yı kullanan kendi JavaScript'inizi nasıl yazacağınız kağıda dökülebilir.
TypeScript
// Initialize and add the map let map; async function initMap(): Promise<void> { // The location of Uluru const position = { lat: -25.344, lng: 131.031 }; // Request needed libraries. //@ts-ignore const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary; // The map, centered at Uluru map = new Map( document.getElementById('map') as HTMLElement, { zoom: 4, center: position, mapId: 'DEMO_MAP_ID', } ); // The marker, positioned at Uluru const marker = new AdvancedMarkerElement({ map: map, position: position, title: 'Uluru' }); } initMap();.
JavaScript
// Initialize and add the map let map; async function initMap() { // The location of Uluru const position = { lat: -25.344, lng: 131.031 }; // Request needed libraries. //@ts-ignore const { Map } = await google.maps.importLibrary("maps"); const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); // The map, centered at Uluru map = new Map(document.getElementById("map"), { zoom: 4, center: position, mapId: "DEMO_MAP_ID", }); // The marker, positioned at Uluru const marker = new AdvancedMarkerElement({ map: map, position: position, title: "Uluru", }); } initMap();
Yukarıdaki kodda Map
ve AdvancedMarkerView
kitaplıkları şu durumlarda yüklenir:
initMap()
işlevi çağrılır.
Kodu anlama
Eğiticinin bu aşamasında şunları yaptık:
- Div dosyasında harita oluşturan bir JavaScript işlevi tanımlandı.
- Haritaya işaretçi eklemek için bir
AdvancedMarkerElement
oluşturuldu.
Harita ekleme
Aşağıdaki kod, yeni bir Google Haritalar nesnesi oluşturur ve orta ve zum düzeyleri de dahil olmak üzere, haritada ayarlanır. Şuna ilişkin dokümanlara bakın: başka mülk seçenekleri bulabilirsiniz.
TypeScript
// The location of Uluru const position = { lat: -25.344, lng: 131.031 }; // Request needed libraries. //@ts-ignore const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary; // The map, centered at Uluru map = new Map( document.getElementById('map') as HTMLElement, { zoom: 4, center: position, mapId: 'DEMO_MAP_ID', } );.
JavaScript
// The location of Uluru const position = { lat: -25.344, lng: 131.031 }; // Request needed libraries. //@ts-ignore const { Map } = await google.maps.importLibrary("maps"); const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); // The map, centered at Uluru map = new Map(document.getElementById("map"), { zoom: 4, center: position, mapId: "DEMO_MAP_ID", });
Her harita için zorunlu iki seçenek vardır: center
ve zoom
. Yukarıda
new Map()
yeni bir Google Haritalar nesnesi oluşturur. center
özelliği
haritanın ortalanacağı API'dir.
zoom
özelliği, harita için yakınlaştırma düzeyini belirtir. Yakınlaştırma: 0 en düşük değerdir
yakınlaştırır ve tüm Dünya'yı görüntüler. Şuna yakınlaştırmak için yakınlaştırma değerini yüksek olarak ayarlayın:
Yüksek çözünürlüklü dünya.
Tüm Dünyanın haritasını tek bir görüntü olarak sunmak için ya bir devasa bir haritayı veya çok düşük çözünürlüklü küçük bir haritayı kullanabilirsiniz. Bu nedenle, harita görselleri Google Haritalar ve Maps JavaScript API'deki uygulamalar harita "karoları"na ayrılır. ve "yakınlaştırma seviyeleri" gibi ifadeler kullanabilirsiniz. Düşük yakınlaştırma düzeylerinde, küçük bir harita deseni grubu, alan; daha yüksek yakınlaştırma seviyelerinde, karolar daha yüksek çözünürlüktedir ve daha küçük bir alan. Aşağıdaki listede, verebileceğiniz yaklaşık ayrıntı düzeyi görebilirsiniz:
- 1: Dünya
- 5: Karalar veya kıta
- 10: Şehir
- 15: Sokaklar
- 20: Binalar
Aşağıdaki üç resim, 0 yakınlaştırma düzeylerinde Tokyo'nun aynı konumunu yansıtmaktadır. 7 ve 18.
İşaretçi ekleyin
Aşağıdaki kod, haritaya bir işaretçi yerleştirir. position
özelliği,
işaretleyicinin konumuna bakar.
TypeScript
// The marker, positioned at Uluru const marker = new AdvancedMarkerElement({ map: map, position: position, title: 'Uluru' });.
JavaScript
// The marker, positioned at Uluru const marker = new AdvancedMarkerElement({ map: map, position: position, title: "Uluru", });
Örnek kodu tamamlayın
Örnek kodun tamamını burada bulabilirsiniz:
TypeScript
// Initialize and add the map let map; async function initMap(): Promise<void> { // The location of Uluru const position = { lat: -25.344, lng: 131.031 }; // Request needed libraries. //@ts-ignore const { Map } = await google.maps.importLibrary("maps") as google.maps.MapsLibrary; const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary; // The map, centered at Uluru map = new Map( document.getElementById('map') as HTMLElement, { zoom: 4, center: position, mapId: 'DEMO_MAP_ID', } ); // The marker, positioned at Uluru const marker = new AdvancedMarkerElement({ map: map, position: position, title: 'Uluru' }); } initMap();.
JavaScript
// Initialize and add the map let map; async function initMap() { // The location of Uluru const position = { lat: -25.344, lng: 131.031 }; // Request needed libraries. //@ts-ignore const { Map } = await google.maps.importLibrary("maps"); const { AdvancedMarkerElement } = await google.maps.importLibrary("marker"); // The map, centered at Uluru map = new Map(document.getElementById("map"), { zoom: 4, center: position, mapId: "DEMO_MAP_ID", }); // The marker, positioned at Uluru const marker = new AdvancedMarkerElement({ map: map, position: position, title: "Uluru", }); } initMap();.
CSS
/* * Always set the map height explicitly to define the size of the div element * that contains the map. */ #map { height: 100%; } /* * Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }
HTML
<html> <head> <title>Add Map</title> <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> <!-- prettier-ignore --> <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))}) ({key: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script> </body> </html>
Örneği Deneyin
İşaretçiler hakkında daha fazla bilgi:
İpuçları ve sorun giderme
- Enlem/boylam alma hakkında daha fazla bilgi edinin koordinatlara odaklanmak ya da bir adresi coğrafi koordinatlara dönüştürmek
- Haritayı özelleştirmek için stil ve özellikler gibi seçeneklerde ince ayar yapabilirsiniz. Örneğin, daha fazla bilgiye ihtiyacınız olursa, stil ve harita üzerinde çizim yapabilirsiniz.
- 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.