Bu sayfa, Cloud Translation API ile çevrilmiştir.

Web Sitenize İşaretçi İçeren Bir Google Haritası Ekleyin

Giriş

Bu eğitim, bir web sayfasına işaretçi içeren basit bir Google haritasını nasıl ekleyeceğinizi göstermektedir. HTML ve CSS başlangıç ve orta seviyesi ile JavaScript bilgisi az olan kullanıcılar için uygundur. Haritalar oluşturma konusunda 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 Ulusal Parkı'ndaki Uluru'da (Ayers Kayası olarak da bilinir) bulunur.

Aşağıdaki bölümde, bu eğiticide haritayı oluşturmak için ihtiyacınız olan kodun tamamı gösterilmektedir.

TypeScript

// Initialize and add the map
function initMap(): void {
  // The location of Uluru
  const uluru = { lat: -25.344, lng: 131.031 };
  // The map, centered at Uluru
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: uluru,
    }
  );

  // The marker, positioned at Uluru
  const marker = new google.maps.Marker({
    position: uluru,
    map: map,
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

// Initialize and add the map
function initMap() {
  // The location of Uluru
  const uluru = { lat: -25.344, lng: 131.031 };
  // The map, centered at Uluru
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: uluru,
  });
  // The marker, positioned at Uluru
  const marker = new google.maps.Marker({
    position: uluru,
    map: map,
  });
}

window.initMap = initMap;index.js

CSS

/* 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 */
}
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>

    <!-- 
      The `defer` attribute causes the callback to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises
      with https://www.npmjs.com/package/@googlemaps/js-api-loader.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>index.html

Örneği Deneyin

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

Başlarken

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

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

Bir web tarayıcısına ihtiyacınız vardır. Desteklenen tarayıcılar listesinden platformunuza göre Google Chrome (önerilir), Firefox, Safari veya Edge gibi iyi bilinen bir tarayıcıyı seçin.

1. Adım: Bir HTML sayfası oluşturun

Temel HTML web sayfasının kodu şöyledir:

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

    <!-- 
      The `defer` attribute causes the callback to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises
      with https://www.npmjs.com/package/@googlemaps/js-api-loader.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html

Bunun, başlık seviyesi üç (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 head ve body içeren bir HTML sayfası oluşturur.

<html>
 <head>
 </head>
 <body>
 </body>
</html>

Aşağıdaki kodu kullanarak haritanın üst kısmına üç adet başlık seviyesi 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>

Eğiticinin bu aşamasında, henüz bir harita eklemediğiniz için div yalnızca gri bir blok olarak görünür. Aşağıdaki kod, div boyutunu ve rengini belirleyen CSS'yi açıklamaktadır.

/**
 * @license
 * Copyright 2019 Google LLC. All Rights Reserved.
 * SPDX-License-Identifier: Apache-2.0
 */
/* 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 büyük olarak ayarlayın. Bu durumda, div cihazınızın web sayfasının genişliğini gösterecek şekilde 400 piksel yüksekliğe ve% 100 genişliğe ayarlanır.

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
function initMap(): void {
  // The location of Uluru
  const uluru = { lat: -25.344, lng: 131.031 };
  // The map, centered at Uluru
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: uluru,
    }
  );

  // The marker, positioned at Uluru
  const marker = new google.maps.Marker({
    position: uluru,
    map: map,
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;index.ts

JavaScript

// Initialize and add the map
function initMap() {
  // The location of Uluru
  const uluru = { lat: -25.344, lng: 131.031 };
  // The map, centered at Uluru
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: uluru,
  });
  // The marker, positioned at Uluru
  const marker = new google.maps.Marker({
    position: uluru,
    map: map,
  });
}

window.initMap = initMap;index.js

CSS

/* 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 */
}
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>

    <!-- 
      The `defer` attribute causes the callback to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises
      with https://www.npmjs.com/package/@googlemaps/js-api-loader.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>index.html

Örneği Deneyin

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

Kodu anlama

script, aşağıdaki kodda, belirtilen URL'den API'yi yükler.

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

Yukarıdaki kodda callback parametresi, API yüklendikten sonra initMap işlevini yürütür. async özelliği, tarayıcı yüklenirken API'nin yüklendiği sırada sayfanızın geri kalanını ayrıştırmaya devam etmesine olanak tanır. Sayfa yüklendiğinde tarayıcı duraklatılır ve komut dosyasını hemen yürütür. key parametresi, API anahtarınızı içerir.

Kendi API anahtarınızı daha sonra alma talimatları için 3. Adım: API anahtarı alma bölümüne bakın.

Aşağıdaki kod, web sayfası yüklendiğinde haritayı başlatan ve ekleyen initMap işlevini içerir. initMap işlevini içeren kendi JavaScript'inizi eklemek için bir script etiketi kullanın.

  function initMap() {}

Web sayfasında div haritasını bulmak için document.getElementById() işlevini ekleyin.

Aşağıdaki kod yeni bir Google Haritalar nesnesi oluşturur ve ortaya merkez ile yakınlaştırma düzeyini içeren özellikler ekler. Diğer mülk seçenekleri ile ilgili belgelere göz atın.

TypeScript

// The location of Uluru
const uluru = { lat: -25.344, lng: 131.031 };
// The map, centered at Uluru
const map = new google.maps.Map(
  document.getElementById("map") as HTMLElement,
  {
    zoom: 4,
    center: uluru,
  }
);index.ts

JavaScript

// The location of Uluru
const uluru = { lat: -25.344, lng: 131.031 };
// The map, centered at Uluru
const map = new google.maps.Map(document.getElementById("map"), {
  zoom: 4,
  center: uluru,
});index.js

Yukarıdaki kodda new google.maps.Map(), yeni bir Google Haritalar nesnesi oluşturur. center özelliği, API'ye haritanın hangi noktaya yerleştirileceğini bildirir.

Enlem/boylam koordinatları 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ünyayı görüntüler. Yakınlaştırma değerini, dünyaya daha yüksek çözünürlüklerde yakınlaştırmak için daha yüksek bir değere 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 google.maps.Marker({
  position: uluru,
  map: map,
});index.ts

JavaScript

// The marker, positioned at Uluru
const marker = new google.maps.Marker({
  position: uluru,
  map: map,
});index.js

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

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

Bu bölümde, kendi API anahtarınızı kullanarak uygulamanızın Maps JavaScript API için nasıl doğrulanacağı açıklanmaktadır.

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

Google Cloud Console'a gidin.
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ı edinin (ve API anahtarı kısıtlamalarını ayarlayın). Not: Sınırsız bir API anahtarınız veya tarayıcı kısıtlamaları olan bir anahtarınız varsa bu anahtarı kullanabilirsiniz.
Kotanın çalınmasını önlemek ve API anahtarınızı güvence altına almak için API Anahtarlarını Kullanma bölümüne bakın.
Faturalandırmayı etkinleştirin. Daha fazla bilgi için Kullanım ve Faturalandırma bölümüne bakın.
Bu eğiticinin tüm kodunu bu sayfadan metin düzenleyicinize kopyalayın.
URL'deki key parametresinin değerini, kendi API anahtarınızla (az önce aldığınız API anahtarı) değiştirin.
```
<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
```
Bu dosyayı index.html ile biten, .html ile biten bir adla kaydedin.
Masaüstünüzden tarayıcınıza sürükleyerek HTML dosyasını 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 değiştirebilirsiniz. Haritaları özelleştirme hakkında daha fazla bilgi için stil ve harita çizimi ile ilgili kılavuzları okuyun.
Kodunuzu test edip ç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.
Konsolu Chrome'da açmak için aşağıdaki klavye kısayollarını kullanın:
Komut+Option+J (Mac'te) veya Control+Üst Karakter+J (Windows'da).
Google Haritalar'daki bir konumun enlem ve boylam koordinatlarını görmek için aşağıdaki adımları izleyin.
1. Google Haritalar'ı bir tarayıcıda açın.
2. Haritada koordinat istediğiniz konumu sağ tıklayın.
3. Görüntülenen içerik menüsünden Burada ne var? seçeneğini belirleyin. Haritada, ekranın alt kısmında bir kart görüntülenir. 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ı, Coğrafi Kodlama hizmetini kullanmaya başlama hakkında ayrıntılı bilgi sağlar.