JavaScript kullanarak işaretçi içeren bir Google Haritası ekleme

Giriş

Bu eğiticide, 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 bilgiye ve JavaScript hakkında biraz bilgiye sahip olan kişiler için uygundur.

Aşağıda, bu eğitimle oluşturacağınız harita yer almaktadır. İşaretçi, Uluru-Kata Tjuta Ulusal Parkı'ndaki Uluru'da (Ayers Kayası olarak da bilinir) bulunur.

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ınız olmalıdır. Desteklenen tarayıcılar listesinden platformunuza göre Google Chrome (önerilir), Firefox, Safari veya Edge gibi bilinen bir tarayıcıyı 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'de nasıl kimlik doğrulayacağı 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ış mevcut 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ı aldıktan sonra "YOUR_API_KEY"yi tıklayarak aşağıdaki snippet'e ekleyin. Kendi web sayfanızda kullanmak için önyükleyici 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

Temel bir HTML web sayfasının kodu aşağıda 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

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

Kodu anlama

Örnekteki bu aşamada:

  • !DOCTYPE html bildirimiyle uygulamayı HTML5 olarak beyan ettiyseniz.
  • Haritayı tutmak için "map" adlı bir div öğesi oluşturuldu.
  • Maps JavaScript API'yi bootstrap yükleyiciyi kullanarak yüklediyseniz.

Uygulamanızı HTML5 olarak beyan etme

Web uygulamanızda doğru bir DOCTYPE beyan etmenizi öneririz. Buradaki örneklerde, uygulamalarımızı aşağıdaki gibi basit HTML5 DOCTYPE kullanarak HTML5 olarak bildirdik:

<!DOCTYPE html>

Mevcut tarayıcıların çoğu, bu DOCTYPE ile "standart modda" tanımlanan içeriği oluşturur. Bu da uygulamanızın tarayıcılar arası uyumluluğunun daha yüksek olması gerektiği anlamına gelir. DOCTYPE, sorunsuz bir şekilde bozulacak şekilde de tasarlanmıştır. Bunu anlamayan tarayıcılar, içeriğini görüntülemek için "uyumsuzluk modu"nu kullanarak bunu yoksayar.

Uygunluk modunda çalışan bazı CSS'lerin standartlar modunda geçerli olmadığını unutmayın. Özellikle, yüzde tabanlı tüm boyutlar üst blok öğelerden devralınmalıdır. Bu öğelerden herhangi biri boyut belirtemezse 0 x 0 piksel boyutunda olduğu 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 yer ayırmamız gerekir. Genellikle, adlandırılmış bir div öğesi oluşturarak ve tarayıcının belge nesne modelinde (DOM) bu öğeye referans alarak bunu 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>

Eğitimin bu aşamasında, henüz harita eklemediğiniz için div yalnızca gri bir blok olarak görünür. Aşağıdaki kodda, div 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ı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 olacak şekilde ayarlayın. Bu durumda, div, web sayfanızın genişliği boyunca gösterilmesi için 400 piksel yüksekliğe ve% 100 genişliğe ayarlanır. Div'lerin genellikle genişliğini kapsayan öğeden aldığını ve boş div'lerin genellikle 0 yüksekliğe sahip olduğunu unutmayın. Bu nedenle, div üzerinde her zaman açıkça bir yükseklik ayarlamanız gerekir.

Maps JavaScript API'yi yükleme

Bootstrap yükleyici, Maps JavaScript API'yi yüklemeye 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ı 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 API'yi kullanarak işaretçi içeren bir harita eklemek için 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, Map ve AdvancedMarkerElement kitaplıkları initMap() işlevi çağrıldığında yüklenir.

Kodu anlama

Eğitimin bu aşamasında:

  • Div'de harita oluşturan bir JavaScript işlevi tanımladıysanız.
  • Haritaya işaretçi eklemek için 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 özelliği, API'ye haritanın nerede ortalanacağını bildirir.

zoom özelliği, haritanın yakınlaştırma düzeyini belirtir. Yakınlaştırma: 0, en düşük yakınlaştırma düzeyidir ve tüm Dünya'yı gösterir. Daha yüksek çözünürlüklerde Dünya'yı yakınlaştırmak için yakınlaştırma değerini daha yüksek ayarlayın.

Tüm Dünya'nın haritasını tek bir resim olarak sunmak için ya çok büyük bir harita ya da çok düşük çözünürlüklü küçük bir harita gerekir. Bu nedenle, Google Haritalar ve Maps JavaScript API'deki harita resimleri, harita "döşemeleri" ve "yakınlaştırma düzeyleri" olarak ayrılır. Düşük yakınlaştırma seviyelerinde, küçük bir harita parçası grubu geniş bir alanı kapsar. Daha yüksek yakınlaştırma seviyelerinde ise parçalar daha yüksek çözünürlüklüdür ve daha küçük bir alanı kapsar. 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 parçası veya kıta
  • 10: Şehir
  • 15: Sokaklar
  • 20: Binalar

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

İşaretçi ekleyin

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

Eksiksiz örnek kod

Tam örnek kodu burada görebilirsiniz:

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

İpuçları ve sorun giderme

  • Enlem/boylam koordinatlarını alma veya adresi coğrafi koordinatlara dönüştürme hakkında daha fazla bilgi edinin.
  • Haritayı özelleştirmek için stil ve özellik gibi seçenekleri ayarlayabilirsiniz. Haritaları özelleştirme hakkında daha fazla bilgi için stil ve harita üzerinde çizim yapma kılavuzlarını inceleyin.
  • 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.
  • 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'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. Koordinatlarını istediğiniz konumu haritada sağ tıklayın.
    3. Görüntülenen içerik menüsünden Burada ne var?'ı seçin. Haritada ekranın alt kısmında bir kart gösterilir. Enlem ve boylam koordinatlarını kartın son satırında bulabilirsiniz.

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