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

Giriş

Bu eğitimde, işaretçiyle basit bir Google haritasını web'e nasıl ekleyeceğiniz gösterilmektedir sayfasını ziyaret edin. Başlangıç veya orta düzey HTML ve CSS bilgisine sahip kişilere uygundur. ve biraz JavaScript bilgim var.

Aşağıda, bu eğiticiyi kullanarak oluşturacağınız haritayı görebilirsiniz. İşaretçi şu konumda bulunuyor: Uluru (Ayers Kayası olarak da bilinir) Uluru-Kata Tjuta Ulusal Parkı'na 3 km uzaklıktadı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. Google Chrome gibi iyi bilinen bir uygulama seçin (önerilir), Firefox, Safari veya Edge, desteklenen tarayıcıların listesine göz atın.

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

Bu bölümde, Maps JavaScript API'yi kendi API anahtarınızı kullanarak oluşturun.

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

  1. Şuraya gidin: Google Cloud Console'da oturum açın.

  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 kısıtlamaları). Not: Mevcut bir kısıtlanmamış API anahtarınız veya anahtarınız varsa söz konusu anahtarı kullanabilirsiniz.

  5. Kota hırsızlığını önlemek ve API anahtarınızın güvenliğini sağlamak için bkz. API Anahtarlarını Kullanma.

  6. Faturalandırmayı etkinleştir. Kullanım ve Faturalandırma'yı inceleyin konulu videomuzu izleyin.

  7. Aldığınız API anahtarını aşağıdaki snippet'e eklemek için "API_ANAHTARINIZ". Bootloader komut dosyası etiketini kopyalayıp kendi başınıza kullanmak için yapıştırın web sayfası.

    <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

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 bir tek bir div öğesi. Web sayfasına istediğiniz içeriği ekleyebilirsiniz.

Kodu anlama

Örneğin bu aşamada şunları yaptık:

  • !DOCTYPE html bildirimi kullanılarak uygulamayı HTML5 olarak tanımladı.
  • "map" adlı bir div öğesi oluşturuldu basılı tutun.
  • Önyükleyici kullanılarak Maps JavaScript API yüklendi.

Uygulamanızı HTML5 olarak beyan edin

Web uygulamanızda gerçek bir DOCTYPE tanımlamanızı öneririz. Buradaki örneklerde, aşağıda gösterildiği gibi basit HTML5 DOCTYPE:

<!DOCTYPE html>

Mevcut tarayıcıların çoğu, bu DOCTYPE ile tanımlanan içeriği oluşturur "standartlar modunda" Bu da uygulamanızın daha hızlı tarayıcılarla uyumlu olduğundan emin olun. DOCTYPE aynı zamanda zarifçe düşürülecek şekilde tasarlanmış; anlamayan tarayıcılar bunu yoksayar ve "Quirks Modu"nu kullanır. - yardımcı olur.

Quirks modunda çalışan bazı CSS'lerin standartlar moduna girer. Özellikle, yüzdeye dayalı tüm boyutların üst blok öğelerinden biri olabilir ve bu üst öğelerden herhangi biri bir boyut belirttiğinde, bunların 0 x 0 piksel boyutunda oldukları varsayılır. Örneğin, Bu nedenle aşağıdaki style beyanını ekleriz:

<style>
  #map {
    height: 100%;
  }
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>

Div öğesi oluşturma

Haritanın bir web sayfasında görüntülenebilmesi için, söz konusu sayfada yer ayırmamız gerekir. Genellikle bunu, adlandırılmış bir div öğesi oluşturup buna bir referans alarak yaparız. öğesi, tarayıcının belge nesne modelinde (DOM) yer alır.

Aşağıdaki kod, Google haritanızda sayfanın bir alanını tanımlar.

<!--The div element for the map -->
<div id="map"></div>

Eğiticinin bu aşamasında div yalnızca gri bir blok olarak görünür, çünkü henüz harita eklemediniz. Aşağıdaki kod, div cihazının boyutu ve rengi.

/* 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. Ayarlayın: Haritanın görünür olması için genişliği ve yüksekliği 0 pikselden fazla olacak şekilde div. Burada durumda, div öğesinin yüksekliği 400 piksel, görüntü genişliği% 100 olarak ayarlanmış reklam öğesidir. Div'lerin genellikle genişliklerini aldığını unutmayın. boş div'lerin yüksekliği genellikle 0 olur. Boş div'lerin yüksekliği ise genellikle 0'dır. Bunun için Bu nedenle, div için 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ü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>

API anahtarı alma talimatları için 3. Adım: API anahtarı alın kendi API anahtarınız.

3. Adım: İşaretçisi olan bir harita ekleyin

Bu bölümde, Maps JavaScript API'yi web sitenize nasıl ve harita eklemek için API'yı kullanan kendi JavaScript'inizi nasıl yazacağınız bir işaretleyici bulunur.

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 AdvancedMarkerView kitaplıkları şu durumlarda yüklenir: initMap() işlevi çağrılır.

Kodu anlama

Eğiticinin bu aşamasında şunları yaptık:

  • Div dosyasında harita oluşturan bir JavaScript işlevi tanımlandı.
  • Haritaya işaretçi eklemek için bir AdvancedMarkerElement oluşturuldu.

Harita ekleme

Aşağıdaki kod yeni bir Google Haritalar nesnesi oluşturur ve orta ve zum düzeyleri de dahil olmak üzere, haritada ayarlanır. Şuna ilişkin dokümanlara bakın: başka mülk seçenekleri bulabilirsiniz.

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 zorunlu iki seçenek vardır: center ve zoom. Yukarıda new Map() yeni bir Google Haritalar nesnesi oluşturur. center özelliği haritanın ortalanacağı API'dir.

zoom özelliği, harita için yakınlaştırma düzeyini belirtir. Yakınlaştırma: 0 en düşük değerdir yakınlaştırır ve tüm Dünya'yı görüntüler. Şuna yakınlaştırmak için yakınlaştırma değerini yüksek olarak ayarlayın: Yüksek çözünürlüklü dünya.

Tüm Dünya'nın haritasını tek bir görüntü olarak sunmak için ya bir devasa bir haritayı veya çok düşük çözünürlüklü küçük bir haritayı kullanabilirsiniz. Bu nedenle, harita görselleri Google Haritalar ve Maps JavaScript API'de, harita "karoları"na ayrılır. ve "yakınlaştırma seviyeleri" gibi ifadeler kullanabilirsiniz. Düşük yakınlaştırma düzeylerinde, küçük bir harita deseni grubu, alan; daha yüksek yakınlaştırma seviyelerinde, karolar daha yüksek çözünürlüktedir ve daha küçük bir alan. Aşağıdaki listede, verebileceğiniz yaklaşık ayrıntı düzeyi görebilirsiniz:

  • 1: Dünya
  • 5: Karalar veya kıta
  • 10: Şehir
  • 15: Sokaklar
  • 20: Binalar

Aşağıdaki üç resim, 0 yakınlaştırma düzeylerinde Tokyo'nun aynı konumunu yansıtmaktadır. 7 ve 18.

İşaretçi ekleyin

Aşağıdaki kod, haritaya bir işaretçi yerleştirir. position özelliği, işaretleyicinin konumuna bakar.

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

  • Enlem/boylam alma hakkında daha fazla bilgi edinin koordinatlara odaklanmak ya da bir adresi coğrafi koordinatlara dönüştürmek
  • Haritayı özelleştirmek için stil ve özellikler gibi seçeneklerde ince ayar yapabilirsiniz. Örneğin, daha fazla bilgiye ihtiyacınız olursa, stil ve harita üzerinde çizim yapabilirsiniz.
  • Uygulamanızı test etmek ve çalıştırmak için web tarayıcınızda Geliştirici Araçları Konsolu'nu kodlayabilir, hata raporlarını okuyabilir ve kodunuzla ilgili sorunları çözebilirsiniz.
  • Chrome'da konsolu açmak için aşağıdaki klavye kısayollarını kullanın:
    Command+Option+J (Mac'te) veya Control+Üst Karakter+J (Windows'da).

  • Enlem ve veri miktarını öğrenmek için aşağıdaki adımları Google Haritalar'da bir konumun boylam koordinatları.

    1. Google Haritalar'ı bir tarayıcıda açın.
    2. Harita üzerinde tam olarak ihtiyacınız olan konumu sağ tıklayın koordinatlar.
    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. Enlemi bulma ve boylam koordinatlarını değiştirin.

  • Bir adresi enlem ve boylam koordinatlarına Coğrafi kodlama hizmeti. Geliştirici kılavuzlarında, Coğrafi Kodlama hizmetini kullanmaya başlama hakkında daha fazla bilgi edinin.