Giriş
Bu eğitim, bir işaretçiyle basit bir Google haritasını web'e nasıl ekleyeceğinizi gösterir 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 "YOUR_API_KEY". 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>style="height: 400 piksel"
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
Aşağıdaki kod, bir başlık ve bir gövde metninden oluşan bir HTML sayfası oluşturur.
<html> <head> </head> <body> </body> </html>
Aşağıdaki kodu kullanarak haritanın üzerine üçüncü bir başlık ekleyebilirsiniz.
<h3>My Google Maps Demo</h3>
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.
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
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",
});
Yukarıdaki kodda, new Map() yeni bir Google Haritalar nesnesi oluşturur. İlgili içeriği oluşturmak için kullanılan
center özelliği, API'ye haritanın ortalanacağı yeri bildirir.
Enlem/boylam koordinatlarını alma, veya bir adresi coğrafi koordinatlara dönüştürün.
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.
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
- 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 değerlerini öğrenmek için aşağıdaki adımları uygulayın 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.