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

Giriş

Bu eğiticide, bir web sayfasına işaretçi içeren basit bir Google haritasını nasıl ekleyeceğiniz gösterilmektedir. Başlangıç veya orta seviye HTML ve CSS bilgisine, biraz da JavaScript bilgisine sahip kişilere uygundur.

Aşağıda, bu eğiticiyi kullanarak oluşturacağınız haritayı görebilirsiniz. İşaretçi, Uluru-Kata Tjuta Ulusal Parkı'ndaki Uluru'da (Ayers Kayası olarak da bilinir) yer alır.

Başlarken

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

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

Web tarayıcısı gerekir. Desteklenen tarayıcılar listesinden platformunuza göre Google Chrome (önerilen), Firefox, Safari veya Edge gibi bilinen bir tarayıcı seçin.

1. Adım: API anahtarı alın

Bu bölümde, kendi API anahtarınızı kullanarak Maps JavaScript API'de uygulamanızın kimliğini nasıl doğrulayacağınız açıklanmaktadır.

API anahtarı almak için şu 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: Mevcut bir kısıtlanmamış 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ı korumak için API Anahtarlarını Kullanma bölümüne bakın.

  6. Faturalandırmayı etkinleştir. Daha fazla bilgi için Kullanım ve Faturalandırma bölümüne bakın.

  7. Aldığınız API anahtarını "API_ANAHTARINIZ"ı tıklayarak aşağıdaki snippet'e ekleyin. Kendi web sayfanızda kullanmak üzere bootloader 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>
    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>

index.html

Bunun, üç başlık düzeyi (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, 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>

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 için div boyutunu ayarlar. 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 öğesinin yüksekliği 400 piksel, genişliği ise web sayfanızın genişliği boyunca% 100 olacak şekilde 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ı alma talimatları için 3. Adım: API anahtarı alın bölümüne bakın.

3. 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();
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 AdvancedMarkerView kitaplıkları yüklenir.

Kodu anlama

Aşağıdaki kod, yeni bir Google Haritalar nesnesi oluşturur ve haritaya orta ve yakınlaştırma düzeyi gibi özellikler ekler. Diğer mülk seçenekleri için belgelere göz atı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',
  }
);
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

Yukarıdaki kodda, new Map() yeni bir Google Haritalar nesnesi oluşturur. center özelliği, API'ye haritanın ortalanacağı 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, harita için yakınlaştırma düzeyini belirtir. Yakınlaştırma: 0, en düşük yakınlaştırmayı 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 olarak ayarlayın.

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

Ö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();
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ç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. Haritaları özelleştirme hakkında daha fazla bilgi edinmek için stil ve harita üzerinde çizim kılavuzlarını okuyun.
  • Kodunuzu test edip ç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.
  • Chrome'da konsolu açmak için şu klavye kısayollarını kullanın:
    Command+Option+J (Mac'te) veya Control+Üst Karakter+J (Windows'da).

  • 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. Haritada tam koordinat gerektiren konumu sağ tıklayın.
    3. 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. 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ı, Coğrafi Kodlama hizmetini kullanmaya başlama hakkında ayrıntılı bilgiler sağlar.