Web Sitenize İşaretçili bir Google Haritası Ekleyin

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 ve biraz JavaScript bilgisine sahip kullanıcılar için 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 haritayı aşağıda bulabilirsiniz. Bu iş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();
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>
    <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: "beta"});</script>
  </body>
</html>
index.html

Örneği Deneyin

Kullanmaya başlama

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

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

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 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>
    <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: "beta"});</script>
  </body>
</html>

index.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 yukarısına üçü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 harita eklemediğiniz için eğiticinin 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 bir değere ayarlayın. Bu örnekte, div öğesi, web sayfanızın genişliği boyunca görüntülenmesi için 400 piksel yüksekliğe ve% 100 genişliğe ayarlanır.

Bootstrap yükleyicisi, 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ı alma 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();
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 merkez ve yakınlaştırma düzeyi gibi özellikler ekler. Diğer mülk seçenekleri için dokümanlara 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',
  }
);
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 merkezini nereye ortalaması gerektiğini 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ükte 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'
});
index.ts

JavaScript

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

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

3. Adım: Bir API anahtarı alın

Bu bölümde, kendi API anahtarınızı kullanarak uygulamanızın Haritalar JavaScript API'sinde kimlik doğrulamasını nasıl yapacağınız açıklanmaktadır.

API anahtarı almak için şu adımları uygulayın:

  1. Google Cloud Console'a gidin.

  2. Bir 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ış 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ı güvence altına almak için API Anahtarlarını Kullanma bölümüne göz atın.

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

  7. Bu sayfadaki eğitim kodunun tamamını metin düzenleyicinize kopyalayın.

  8. URL'deki key parametresinin değerini kendi API anahtarınızla (az önce 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>

  9. Bu dosyayı .html ile biten bir adla (ör. index.html) kaydedin.

  10. HTML dosyasını masaüstünüzden tarayıcınıza sürükleyerek bir web tarayıcısında yükleyin. Alternatif olarak, çoğu işletim sisteminde dosyayı çift tıklayabilirsiniz.

İpuçları ve sorun giderme

  • Haritayı özelleştirmek için stil ve özellikler gibi seçeneklerde ince ayar yapabilirsiniz. Haritaları özelleştirmeyle ilgili 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) veya Control+ÜstKrktr+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. Harita üzerinde koordinat kullanılmasını istediğiniz tam konumu 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ö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.