Giriş
Bu eğiticide, web sayfasına işaretçi içeren basit bir Google haritasının nasıl ekleneceği gösterilmektedir. HTML ve CSS ile ilgili başlangıç veya orta düzeyde bilgi ve biraz JavaScript bilgisi olan kişilere uygundur. Harita oluşturmayla ilgili 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 Milli Parkı'ndaki Uluru (Ayers Kayası olarak da bilinir) üzerinde konumlandırılır.
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> <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> <!-- 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
Kullanmaya başlama
Web sayfanızda işaretçi içeren bir Google haritası oluşturmanın üç adımı vardır:
Web tarayıcısı gerekir. Desteklenen tarayıcılar listesinden platformunuza göre Google Chrome (önerilen), Firefox, Safari veya Edge gibi iyi bilinen bir tarayıcı seçin.
1. Adım: HTML sayfası oluşturma
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> <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> <!-- 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 üçüncü (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, başlık ve gövdeden oluşan bir HTML sayfası oluşturur.
<html> <head> </head> <body> </body> </html>
Aşağıdaki kodu kullanarak haritanın üzerine üçüncü seviye bir başlık 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>
Henüz bir harita eklemediğiniz için eğitimin bu aşamasında div
, yalnızca gri bir blok olarak görünür. Aşağıdaki kod, div
öğesinin boyutunu ve rengini belirleyen CSS'yi açıklar.
/* 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 daha büyük bir değere ayarlayın. Bu durumda, div
öğesi web sayfanızın genişliği boyunca görüntülenmek üzere 400 piksel yüksekliğe ve% 100 genişliğe ayarlanır.
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>
Kendi API anahtarınızı almayla ilgili talimatlar için 3. Adım: API anahtarı alın bölümüne bakın.
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 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 initMap()
işlevi çağrıldığında Map
ve AdvancedMarkerView
kitaplıkları yüklenir.
Kodu anlama
Aşağıdaki kod yeni bir Google haritalar nesnesi oluşturur ve haritaya ortala ve yakınlaştırma seviyesi gibi özellikler ekler. Diğer mülk seçenekleri için belgelere bakın.
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", });
Yukarıdaki kodda new Map()
, yeni bir Google Haritalar nesnesi oluşturur. center
özelliği, API'ye haritanın merkeze alınması gereken yeri bildirir.
Enlem/boylam koordinatlarını 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ünya’yı gösterir. Dünya'yı daha yüksek çözünürlüklerde yakınlaştırmak için
yakınlaştırma değerini daha yükseğe 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 AdvancedMarkerElement({ map: map, position: position, title: 'Uluru' });
JavaScript
// The marker, positioned at Uluru const marker = new AdvancedMarkerElement({ map: map, position: position, title: "Uluru", });
İşaretçiler hakkında daha fazla bilgi:
3. Adım: API anahtarı alın
Bu bölümde, kendi API anahtarınızı kullanarak uygulamanızın Haritalar JavaScript API'de kimlik doğrulamasını nasıl yapacağınız açıklanmaktadır.
API anahtarı almak için şu adımları uygulayın:
Google Cloud Console'a gidin.
Bir 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: Kısıtlanmamış bir API anahtarınız varsa 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ı güvenli hale getirmek için API Anahtarlarını Kullanma bölümüne göz atın.
Faturalandırmayı etkinleştir. Daha fazla bilgi için Kullanım ve Faturalandırma bölümüne bakın.
Bu sayfadaki eğitim kodunun tamamını metin düzenleyicinize kopyalayın.
URL'deki
key
parametresinin değerini kendi API anahtarınızla (yeni satın aldığınız API anahtarı) değiştirin.<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>
Bu dosyayı
.html
ile biten bir adla (ör.index.html
) kaydedin.HTML dosyasını masaüstünüzden tarayıcınıza sürükleyerek 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 düzenleyebilirsiniz. Haritaları özelleştirme hakkında daha fazla bilgi edinmek için, stil ve harita üzerinde çizim kılavuzlarını okuyun.
- Kodunuzu test etmek ve çalıştırmak, hata raporlarını okumak ve kodunuzla ilgili sorunları çözmek için web tarayıcınızda Geliştirici Araçları Konsolu'nu kullanın.
- Konsolu Chrome'da açmak için aşağıdaki klavye kısayollarını kullanın:
Command+Option+J (Mac'te) veya Control+Shift+J (Windows'da). Google Haritalar'daki 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.
- Harita üzerinde, koordinatını gerekli kıldığınız tam konumu sağ tıklayın.
- Görünen içerik menüsünden Burada ne var? seçeneğini belirleyin. Harita, ekranın alt kısmında bir kart görüntüler. 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ında, Coğrafi Kodlama hizmetini kullanmaya başlama hakkında ayrıntılı bilgiler yer alır.