این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

یک نقشه گوگل با نشانگر به وب سایت خود اضافه کنید

معرفی

این آموزش به شما نشان می دهد که چگونه یک نقشه ساده گوگل را با یک نشانگر به یک صفحه وب اضافه کنید. این برای افرادی مناسب است که دانش مبتدی یا متوسطی از HTML و CSS دارند و دانش کمی از جاوا اسکریپت دارند. برای راهنمایی پیشرفته برای ایجاد نقشه، راهنمای توسعه دهنده را بخوانید.

در زیر نقشه ای است که با استفاده از این آموزش ایجاد خواهید کرد. نشانگر در اولورو (همچنین به عنوان صخره آیرز شناخته می شود) در پارک ملی اولورو-کاتا توتا قرار دارد.

بخش زیر کل کد مورد نیاز برای ایجاد نقشه را در این آموزش نمایش می دهد.

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

جاوا اسکریپت

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

Sample را امتحان کنید

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

شروع شدن

سه مرحله برای ایجاد نقشه گوگل با نشانگر در صفحه وب شما وجود دارد:

یک صفحه HTML ایجاد کنید
یک نقشه با نشانگر اضافه کنید
یک کلید API دریافت کنید

شما به یک مرورگر وب نیاز دارید. بر اساس پلتفرم خود از لیست مرورگرهای پشتیبانی شده، یکی از شناخته شده‌ها مانند Google Chrome (توصیه‌شده)، فایرفاکس، سافاری یا Edge را انتخاب کنید.

مرحله 1: یک صفحه HTML ایجاد کنید

در اینجا کد یک صفحه وب پایه HTML آمده است:

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

توجه داشته باشید که این یک صفحه بسیار ابتدایی با عنوان سطح سه ( h3 ) و یک عنصر div است. می توانید هر محتوایی را که دوست دارید به صفحه وب اضافه کنید.

درک کد

کد زیر یک صفحه HTML متشکل از یک سر و یک بدن ایجاد می کند.

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

می توانید با استفاده از کد زیر یک عنوان سطح سه را در بالای نقشه اضافه کنید.

<h3>My Google Maps Demo</h3>

کد زیر ناحیه ای از صفحه را برای نقشه گوگل شما تعریف می کند.

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

در این مرحله از آموزش، div فقط به عنوان یک بلوک خاکستری ظاهر می شود، زیرا شما هنوز نقشه ای اضافه نکرده اید. کد زیر CSS را توصیف می کند که اندازه و رنگ div را تعیین می کند.

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

در کد بالا، عنصر style اندازه div را برای نقشه شما تعیین می کند. عرض و ارتفاع div را بیشتر از 0px تنظیم کنید تا نقشه قابل مشاهده باشد. در این حالت، div روی ارتفاع 400 پیکسل و عرض 100 درصد تنظیم می شود تا عرض صفحه وب شما نمایش داده شود.

مرحله 2: یک نقشه با یک نشانگر اضافه کنید

این بخش به شما نشان می‌دهد که چگونه Maps JavaScript API را در صفحه وب خود بارگیری کنید و چگونه جاوا اسکریپت خود را بنویسید که از API برای اضافه کردن نقشه با نشانگر روی آن استفاده می‌کند.

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

جاوا اسکریپت

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

Sample را امتحان کنید

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

درک کد

در کد زیر، script API را از URL مشخص شده بارگیری می کند.

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

در کد بالا، پارامتر callback تابع initMap را پس از بارگذاری API اجرا می کند. ویژگی async به مرورگر اجازه می‌دهد تا زمانی که API بارگیری می‌شود، به تجزیه باقی‌مانده صفحه شما ادامه دهد. پس از بارگیری، مرورگر مکث کرده و بلافاصله اسکریپت را اجرا می کند. پارامتر key حاوی کلید API شما است.

به مرحله 3 مراجعه کنید: یک کلید API برای دستورالعمل های دریافت کلید API خود در آینده دریافت کنید.

کد زیر حاوی تابع initMap است که هنگام بارگیری صفحه وب، نقشه را مقداردهی اولیه کرده و اضافه می کند. از یک تگ script برای گنجاندن جاوا اسکریپت خود که حاوی تابع initMap است استفاده کنید.

  function initMap() {}

تابع document.getElementById() را اضافه کنید تا نقشه div را در صفحه وب پیدا کنید.

کد زیر یک شی جدید نقشه گوگل را می سازد و ویژگی هایی از جمله مرکز و سطح زوم را به نقشه اضافه می کند. برای سایر گزینه های ملک به اسناد مراجعه کنید.

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

جاوا اسکریپت

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

در کد بالا، new google.maps.Map() یک شی جدید نقشه گوگل ایجاد می کند. ویژگی center به API می گوید که نقشه را در کجا قرار دهد.

درباره دریافت مختصات طول و عرض جغرافیایی یا تبدیل آدرس به مختصات جغرافیایی بیشتر بیاموزید.

ویژگی zoom سطح بزرگنمایی نقشه را مشخص می کند. زوم: 0 کمترین زوم است و کل زمین را نمایش می دهد. مقدار زوم را بیشتر تنظیم کنید تا روی زمین با وضوح بالاتر زوم کنید.

کد زیر یک نشانگر روی نقشه قرار می دهد. ویژگی position موقعیت نشانگر را تعیین می کند.

TypeScript

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

جاوا اسکریپت

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

درباره نشانگرها بیشتر بدانید:

مرحله 3: یک کلید API دریافت کنید

این بخش نحوه احراز هویت برنامه خود را در Maps JavaScript API با استفاده از کلید API خود توضیح می دهد.

برای دریافت کلید API مراحل زیر را دنبال کنید:

به Google Cloud Console بروید.
ایجاد یا انتخاب یک پروژه
برای فعال کردن API و هر سرویس مرتبط، روی Continue کلیک کنید.
در صفحه اعتبارنامه ، یک کلید API دریافت کنید (و محدودیت های کلید API را تنظیم کنید). توجه: اگر یک کلید API نامحدود یا کلیدی با محدودیت های مرورگر دارید، می توانید از آن کلید استفاده کنید.
برای جلوگیری از سرقت سهمیه و ایمن کردن کلید API خود، به استفاده از کلیدهای API مراجعه کنید.
فعال کردن صورتحساب برای اطلاعات بیشتر به استفاده و صورتحساب مراجعه کنید.
کل کد این آموزش را از این صفحه در ویرایشگر متن خود کپی کنید.
مقدار پارامتر key در URL را با کلید API خود جایگزین کنید (این همان کلید API است که به تازگی بدست آورده اید).
```
<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
```
این فایل را با نامی ذخیره کنید که به .html می شود، مانند index.html .
فایل HTML را با کشیدن آن از روی دسکتاپ به مرورگر خود در یک مرورگر وب بارگیری کنید. از طرف دیگر، دوبار کلیک کردن روی فایل در اکثر سیستم عامل ها کار می کند.

نکات و عیب یابی

می‌توانید گزینه‌هایی مانند سبک و ویژگی‌ها را برای سفارشی کردن نقشه تغییر دهید. برای اطلاعات بیشتر در مورد سفارشی کردن نقشه‌ها، راهنمای طراحی و طراحی روی نقشه را بخوانید.
از Developer Tools Console در مرورگر وب خود برای آزمایش و اجرای کد، خواندن گزارش های خطا و حل مشکلات کد خود استفاده کنید.
برای باز کردن کنسول در کروم از میانبرهای صفحه کلید زیر استفاده کنید:
Command+Option+J (در مک)، یا Control+Shift+J (در ویندوز).
مراحل زیر را برای دریافت مختصات طول و عرض جغرافیایی برای یک مکان در Google Maps دنبال کنید.
1. Google Maps را در مرورگر باز کنید.
2. روی مکان دقیقی که برای آن مختصات نیاز دارید کلیک راست کنید.
3. از منوی زمینه ای که ظاهر می شود ، What's here را انتخاب کنید. نقشه یک کارت را در پایین صفحه نمایش می دهد. مختصات طول و عرض جغرافیایی را در ردیف آخر کارت بیابید.
با استفاده از سرویس Geocoding می توانید یک آدرس را به مختصات طول و عرض جغرافیایی تبدیل کنید. راهنماهای توسعه دهنده اطلاعات دقیقی را در مورد شروع به کار با سرویس Geocoding ارائه می دهند.