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 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();
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: "weekly"});</script>
  </body>
</html>
index.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:

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

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 ü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();
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 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',
  }
);
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 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'
});
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: 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:

  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ış bir API anahtarınız varsa 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üvenli hale getirmek için API Anahtarlarını Kullanma bölümüne göz atın.

  6. Faturalandırmayı etkinleştir. 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 (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>

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

    1. Google Haritalar'ı bir tarayıcıda açın.
    2. Harita üzerinde, koordinatını gerekli kıldığınız tam konumu sağ tıklayın.
    3. 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.