JavaScript kullanarak İşaretçisi olan bir Google Haritası ekleme

Giriş

Bu eğitimde, bir web sayfasına işaretçi içeren basit bir Google haritasının nasıl ekleneceği gösterilmektedir. HTML ve CSS hakkında başlangıç veya orta düzeyde bilgi sahibi olan ve JavaScript hakkında biraz bilgi sahibi olan kişiler için uygundur.

Bu eğitimde oluşturacağınız harita aşağıda verilmiştir. İşaretçi, Uluru-Kata Tjuta Ulusal Parkı'ndaki Uluru'da (Ayers Kayası olarak da bilinir) konumlandırılmıştır.

Başlarken

Web sayfanızda işaretçi içeren bir Google haritası oluşturmak için üç adım vardır:

  1. API anahtarı alma
  2. HTML sayfası oluşturma
  3. İşaretçi içeren bir harita ekleme

Web tarayıcısı kullanmanız gerekir. Desteklenen tarayıcılar listesinden platformunuza göre Google Chrome (önerilir), Firefox, Safari veya Edge gibi iyi 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:

  1. Google Cloud Console'a gidin.

  2. Proje oluşturun veya seçin.

  3. API'yi ve ilgili hizmetleri etkinleştirmek için Devam'ı tıklayın.

  4. 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 veya tarayıcı kısıtlamaları olan bir anahtarınız varsa bu anahtarı kullanabilirsiniz.

  5. 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.

  6. Faturalandırmayı etkinleştirin. Daha fazla bilgi için Kullanım ve Faturalandırma başlıklı makaleyi inceleyin.

  7. API anahtarınızı aldıktan sonra "API_ANAHTARINIZ"ı tıklayarak aşağıdaki snippet'e ekleyin. Kendi web sayfanızda kullanmak için önyükleme programı komut dosyası etiketini kopyalayıp yapıştırın.

    <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 yer almaktadır:

<!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>

index.html

Bu sayfanın, üçüncü düzey bir başlık (h3) ve tek bir div öğesine sahip çok basit bir sayfa olduğunu unutmayın. Web sayfasına istediğiniz içeriği ekleyebilirsiniz.

Kodu anlama

Örneğin bu aşamasında:

  • !DOCTYPE html beyanını kullanarak uygulamayı HTML5 olarak beyan etti.
  • Haritayı barındırmak için "harita" adlı bir div öğesi oluşturuldu.
  • Maps JavaScript API'yi önyükleme yükleyicisini kullanarak yüklediniz.

Uygulamanızı HTML5 olarak beyan etme

Web uygulamanızda doğru bir DOCTYPE tanımlamanızı öneririz. Buradaki örneklerde, aşağıdaki gibi basit HTML5 DOCTYPE kullanarak uygulamalarımızı HTML5 olarak tanımladık:

<!DOCTYPE html>

Mevcut tarayıcıların çoğu, bu DOCTYPE ile beyan edilen içeriği "standartlar modunda" oluşturur. Bu, uygulamanızın tarayıcı uyumluluğunun daha yüksek olması gerektiği anlamına gelir. DOCTYPE, sorunsuz bir şekilde bozulacak şekilde tasarlanmıştır. Bu özelliği anlamayan tarayıcılar, özelliği yok sayar ve içeriklerini görüntülemek için "quirks modu"nu kullanır.

Tuhaflıklar modunda çalışan bazı CSS'lerin standartlar modunda geçerli olmadığını unutmayın. Özellikle, yüzdeye dayalı tüm boyutlar üst blok öğelerinden devralınmalıdır ve bu üst öğelerden herhangi biri boyut belirtmezse 0 x 0 piksel boyutunda oldukları varsayılır. Bu nedenle, aşağıdaki style beyanını ekliyoruz:

<style>
  #map {
    height: 100%;
  }
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>

div öğesi oluşturma

Haritanın bir web sayfasında gösterilmesi için harita için bir yer ayırmamız gerekir. Genellikle bunu, adlandırılmış bir div öğesi oluşturarak ve tarayıcıdaki belge nesne modelinde (DOM) bu öğeye ait bir referans elde ederek yaparız.

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 harita eklemediğiniz için eğitici içeriğin bu aşamasında div gri bir blok olarak görünür. Aşağıdaki kodda, div öğesinin boyutunu ve rengini ayarlayan CSS açıklanmaktadır.

/* 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 belirler. Haritanın görünür olması için div genişliğini ve yüksekliğini 0 pikselden büyük olacak şekilde ayarlayın. Bu durumda div, web sayfanızın genişliğinde gösterilecek şekilde 400 piksel yüksekliğe ve% 100 genişliğe ayarlanmıştır. Div'lerin genellikle genişliklerini içeren öğelerinden aldığını ve boş div'lerin genellikle 0 yüksekliğe sahip olduğunu unutmayın. Bu nedenle, div için her zaman açıkça bir yükseklik ayarlamanız gerekir.

Maps JavaScript API'yi yükleme

Önyükleme yükleyici, Maps JavaScript API'yi yüklemeye hazırlar (importLibrary() çağrılana kadar hiçbir 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ı alma talimatları için 3. Adım: API anahtarı alma bölümüne bakın.

3. adım: İşaretçi içeren 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();
index.ts

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();
index.js

Yukarıdaki kodda, initMap() işlevi çağrıldığında Map ve AdvancedMarkerElement kitaplıkları yüklenir.

Kodu anlama

Eğitimin bu aşamasında:

  • div içinde bir harita oluşturan bir JavaScript işlevi tanımlandı.
  • Haritaya işaretçi eklemek için bir AdvancedMarkerElement oluşturdu.

Harita ekleme

Aşağıdaki kod, yeni bir Google Haritalar nesnesi oluşturur ve haritaya merkez ve yakınlaştırma düzeyi gibi özellikler ekler. Diğer mülk seçenekleri ile ilgili dokümanları inceleyin.

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',
  }
);
index.ts

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",
});

index.js

Her harita için iki zorunlu seçenek vardır: center ve zoom. Yukarıdaki kodda new Map() yeni bir Google Haritalar nesnesi oluşturur. center mülkü, API'ye haritayı nereye ortalayacağını söyler.

zoom mülkü, haritanın yakınlaştırma düzeyini belirtir. Yakınlaştırma: 0 en düşük yakınlaştırmadır ve Dünya'nın tamamını 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üksek bir değere ayarlayın.

Dünyanın tamamının tek bir resim olarak sunulması için çok büyük bir harita veya çok düşük çözünürlüklü küçük bir harita gerekir. Sonuç olarak, Google Haritalar ve Maps JavaScript API'deki harita resimleri harita "kartonları" ve "yakınlaştırma düzeylerine" ayrılır. Düşük yakınlaştırma seviyelerinde küçük bir harita karosu grubu geniş bir alanı kaplar. Yüksek yakınlaştırma seviyelerinde ise karolar daha yüksek çözünürlüktedir ve daha küçük bir alanı kaplar. Aşağıdaki listede, her bir yakınlaştırma düzeyinde görmeyi bekleyebileceğiniz yaklaşık ayrıntı düzeyi gösterilmektedir:

  • 1: Dünya
  • 5: Kara kütlesi veya kıta
  • 10: Şehir
  • 15: Sokaklar
  • 20: Binalar

Aşağıdaki üç resimde, Tokyo'nun 0, 7 ve 18 yakınlaştırma düzeylerindeki aynı konumu görebilirsiniz.

İşaretçi ekleyin

Aşağıdaki kod, haritaya bir işaretçi yerleştirir. position özelliği, işaretçinin konumunu belirler.

TypeScript

// The marker, positioned at Uluru
const marker = new AdvancedMarkerElement({
  map: map,
  position: position,
  title: 'Uluru'
});
index.ts

JavaScript

// The marker, positioned at Uluru
const marker = new AdvancedMarkerElement({
  map: map,
  position: position,
  title: "Uluru",
});
index.js

Eksiksiz örnek kod

Ö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();
index.ts

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();
index.js

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;
}

style.css

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>
index.html

Örneği Deneyin

İşaretçi hakkında daha fazla bilgi:

İpuçları ve sorun giderme

  • Enlem/boylam koordinatlarını alma veya bir adresi coğrafi koordinatlara dönüştürme hakkında daha fazla bilgi edinin.
  • Haritayı özelleştirmek için stil ve özellikler gibi seçenekleri değiştirebilirsiniz. Haritaları özelleştirme hakkında daha fazla bilgi için stillendirme ve haritada çizim yapma ile ilgili kılavuzları okuyun.
  • 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.

    1. Google Haritalar'ı bir tarayıcıda açın.
    2. Koordinatlarını öğrenmek istediğiniz konumu haritada sağ tıklayın.
    3. 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.