معرفی
این آموزش به شما نشان می دهد که چگونه یک نقشه ساده گوگل را با یک نشانگر به یک صفحه وب اضافه کنید. این برای افرادی مناسب است که دانش مبتدی یا متوسطی از HTML و CSS دارند و دانش کمی از جاوا اسکریپت دارند. برای راهنمایی پیشرفته برای ایجاد نقشه، راهنمای توسعه دهنده را بخوانید.
در زیر نقشه ای است که با استفاده از این آموزش ایجاد خواهید کرد. نشانگر در اولورو (همچنین به عنوان صخره آیرز شناخته می شود) در پارک ملی اولورو-کاتا توتا قرار دارد.
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();
جاوا اسکریپت
// 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();
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; }
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: "beta"});</script> </body> </html>
Sample را امتحان کنید
شروع شدن
سه مرحله برای ایجاد نقشه گوگل با نشانگر در صفحه وب شما وجود دارد:
شما به یک مرورگر وب نیاز دارید. بر اساس پلتفرم خود از لیست مرورگرهای پشتیبانی شده، یکی از شناخته شدهها مانند 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> <!-- 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: "beta"});</script> </body> </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
را تعیین می کند.
/* 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 درصد تنظیم می شود تا عرض صفحه وب شما نمایش داده شود.
بارگذار بوت استرپ Maps JavaScript API را برای بارگیری آماده می کند (تا زمانی که importLibrary()
فراخوانی نشود هیچ کتابخانه ای بارگذاری نمی شود.
<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_HERE", 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>
به مرحله 3 مراجعه کنید: یک کلید API برای دستورالعمل های دریافت کلید API خود دریافت کنید .
مرحله 2: یک نقشه با یک نشانگر اضافه کنید
این بخش به شما نشان می دهد که چگونه Maps JavaScript API را در صفحه وب خود بارگیری کنید و چگونه جاوا اسکریپت خود را بنویسید که از API برای اضافه کردن نقشه با نشانگر روی آن استفاده می کند.
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();
جاوا اسکریپت
// 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();
در کد بالا، کتابخانه های Map
و AdvancedMarkerView
با فراخوانی تابع initMap()
بارگذاری می شوند.
درک کد
کد زیر یک شی جدید نقشه گوگل را می سازد و ویژگی هایی از جمله مرکز و سطح زوم را به نقشه اضافه می کند. برای سایر گزینه های ملک به اسناد مراجعه کنید.
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', } );
جاوا اسکریپت
// 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", });
در کد بالا، new Map()
یک شیء جدید نقشه گوگل ایجاد می کند. ویژگی center
به API می گوید که نقشه را در کجا قرار دهد.
درباره دریافت مختصات طول و عرض جغرافیایی یا تبدیل آدرس به مختصات جغرافیایی بیشتر بیاموزید.
ویژگی zoom
سطح بزرگنمایی نقشه را مشخص می کند. زوم: 0 کمترین زوم است و کل زمین را نمایش می دهد. مقدار زوم را بیشتر تنظیم کنید تا روی زمین با وضوح بالاتر زوم کنید.
کد زیر یک نشانگر روی نقشه قرار می دهد. ویژگی position
موقعیت نشانگر را تعیین می کند.
TypeScript
// The marker, positioned at Uluru const marker = new AdvancedMarkerElement({ map: map, position: position, title: 'Uluru' });
جاوا اسکریپت
// The marker, positioned at Uluru const marker = new AdvancedMarkerElement({ map: map, position: position, title: "Uluru", });
درباره نشانگرها بیشتر بدانید:
مرحله 3: یک کلید API دریافت کنید
این بخش نحوه احراز هویت برنامه خود را در Maps JavaScript API با استفاده از کلید API خود توضیح می دهد.
برای دریافت کلید API مراحل زیر را دنبال کنید:
به Google Cloud Console بروید.
ایجاد یا انتخاب یک پروژه
برای فعال کردن API و هر سرویس مرتبط، روی Continue کلیک کنید.
در صفحه اعتبارنامه ، یک کلید API دریافت کنید (و محدودیت های کلید API را تنظیم کنید). توجه: اگر یک کلید API نامحدود یا کلیدی با محدودیت های مرورگر دارید، می توانید از آن کلید استفاده کنید.
برای جلوگیری از سرقت سهمیه و ایمن کردن کلید API خود، به استفاده از کلیدهای API مراجعه کنید.
فعال کردن صورتحساب برای اطلاعات بیشتر به استفاده و صورتحساب مراجعه کنید.
کل کد این آموزش را از این صفحه در ویرایشگر متن خود کپی کنید.
مقدار پارامتر
key
در URL را با کلید API خود جایگزین کنید (این همان کلید API است که به تازگی بدست آورده اید).<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_HERE", 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>
این فایل را با نامی ذخیره کنید که به
.html
ختم می شود، مانندindex.html
.فایل HTML را با کشیدن آن از روی دسکتاپ به مرورگر خود در یک مرورگر وب بارگیری کنید. از طرف دیگر، دوبار کلیک کردن روی فایل در اکثر سیستم عامل ها کار می کند.
نکات و عیب یابی
- میتوانید گزینههایی مانند سبک و ویژگیها را برای سفارشی کردن نقشه تغییر دهید. برای اطلاعات بیشتر در مورد سفارشی کردن نقشهها، راهنمای طراحی و طراحی روی نقشه را بخوانید.
- از Developer Tools Console در مرورگر وب خود برای آزمایش و اجرای کد، خواندن گزارش های خطا و حل مشکلات کد خود استفاده کنید.
- برای باز کردن کنسول در کروم از میانبرهای صفحه کلید زیر استفاده کنید:
Command+Option+J (در مک)، یا Control+Shift+J (در ویندوز). مراحل زیر را برای دریافت مختصات طول و عرض جغرافیایی برای یک مکان در Google Maps دنبال کنید.
- Google Maps را در مرورگر باز کنید.
- روی مکان دقیقی که برای آن مختصات نیاز دارید کلیک راست کنید.
- از منوی زمینه ای که ظاهر می شود ، What's here را انتخاب کنید. نقشه یک کارت را در پایین صفحه نمایش می دهد. مختصات طول و عرض جغرافیایی را در ردیف آخر کارت بیابید.
با استفاده از سرویس Geocoding می توانید یک آدرس را به مختصات طول و عرض جغرافیایی تبدیل کنید. راهنماهای توسعه دهنده اطلاعات دقیقی را در مورد شروع به کار با سرویس Geocoding ارائه می دهند.
معرفی
این آموزش به شما نشان می دهد که چگونه یک نقشه ساده گوگل را با یک نشانگر به یک صفحه وب اضافه کنید. این برای افرادی مناسب است که دانش مبتدی یا متوسطی از HTML و CSS دارند و دانش کمی از جاوا اسکریپت دارند. برای راهنمایی پیشرفته برای ایجاد نقشه، راهنمای توسعه دهنده را بخوانید.
در زیر نقشه ای است که با استفاده از این آموزش ایجاد خواهید کرد. نشانگر در اولورو (همچنین به عنوان صخره آیرز شناخته می شود) در پارک ملی اولورو-کاتا توتا قرار دارد.
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();
جاوا اسکریپت
// 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();
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; }
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: "beta"});</script> </body> </html>
Sample را امتحان کنید
شروع شدن
سه مرحله برای ایجاد نقشه گوگل با نشانگر در صفحه وب شما وجود دارد:
شما به یک مرورگر وب نیاز دارید. بر اساس پلتفرم خود از لیست مرورگرهای پشتیبانی شده، یکی از شناخته شدهها مانند 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> <!-- 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: "beta"});</script> </body> </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
را تعیین می کند.
/* 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 درصد تنظیم می شود تا عرض صفحه وب شما نمایش داده شود.
بارگذار بوت استرپ Maps JavaScript API را برای بارگیری آماده می کند (تا زمانی که importLibrary()
فراخوانی نشود هیچ کتابخانه ای بارگذاری نمی شود.
<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_HERE", 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>
به مرحله 3 مراجعه کنید: یک کلید API برای دستورالعمل های دریافت کلید API خود دریافت کنید .
مرحله 2: یک نقشه با یک نشانگر اضافه کنید
این بخش به شما نشان می دهد که چگونه Maps JavaScript API را در صفحه وب خود بارگیری کنید و چگونه جاوا اسکریپت خود را بنویسید که از API برای اضافه کردن نقشه با نشانگر روی آن استفاده می کند.
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();
جاوا اسکریپت
// 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();
در کد بالا، کتابخانه های Map
و AdvancedMarkerView
با فراخوانی تابع initMap()
بارگذاری می شوند.
درک کد
کد زیر یک شی جدید نقشه گوگل را می سازد و ویژگی هایی از جمله مرکز و سطح زوم را به نقشه اضافه می کند. برای سایر گزینه های ملک به اسناد مراجعه کنید.
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', } );
جاوا اسکریپت
// 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", });
در کد بالا، new Map()
یک شیء جدید نقشه گوگل ایجاد می کند. ویژگی center
به API می گوید که نقشه را در کجا قرار دهد.
درباره دریافت مختصات طول و عرض جغرافیایی یا تبدیل آدرس به مختصات جغرافیایی بیشتر بیاموزید.
ویژگی zoom
سطح بزرگنمایی نقشه را مشخص می کند. زوم: 0 کمترین زوم است و کل زمین را نمایش می دهد. مقدار زوم را بیشتر تنظیم کنید تا روی زمین با وضوح بالاتر زوم کنید.
کد زیر یک نشانگر روی نقشه قرار می دهد. ویژگی position
موقعیت نشانگر را تعیین می کند.
TypeScript
// The marker, positioned at Uluru const marker = new AdvancedMarkerElement({ map: map, position: position, title: 'Uluru' });
جاوا اسکریپت
// The marker, positioned at Uluru const marker = new AdvancedMarkerElement({ map: map, position: position, title: "Uluru", });
درباره نشانگرها بیشتر بدانید:
مرحله 3: یک کلید API دریافت کنید
این بخش نحوه احراز هویت برنامه خود را در Maps JavaScript API با استفاده از کلید API خود توضیح می دهد.
برای دریافت کلید API مراحل زیر را دنبال کنید:
به Google Cloud Console بروید.
ایجاد یا انتخاب یک پروژه
برای فعال کردن API و هر سرویس مرتبط، روی Continue کلیک کنید.
در صفحه اعتبارنامه ، یک کلید API دریافت کنید (و محدودیت های کلید API را تنظیم کنید). توجه: اگر یک کلید API نامحدود یا کلیدی با محدودیت های مرورگر دارید، می توانید از آن کلید استفاده کنید.
برای جلوگیری از سرقت سهمیه و ایمن کردن کلید API خود، به استفاده از کلیدهای API مراجعه کنید.
فعال کردن صورتحساب برای اطلاعات بیشتر به استفاده و صورتحساب مراجعه کنید.
کل کد این آموزش را از این صفحه در ویرایشگر متن خود کپی کنید.
مقدار پارامتر
key
در URL را با کلید API خود جایگزین کنید (این همان کلید API است که به تازگی بدست آورده اید).<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_HERE", 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>
این فایل را با نامی ذخیره کنید که به
.html
ختم می شود، مانندindex.html
.فایل HTML را با کشیدن آن از روی دسکتاپ به مرورگر خود در یک مرورگر وب بارگیری کنید. از طرف دیگر، دوبار کلیک کردن روی فایل در اکثر سیستم عامل ها کار می کند.
نکات و عیب یابی
- میتوانید گزینههایی مانند سبک و ویژگیها را برای سفارشی کردن نقشه تغییر دهید. برای اطلاعات بیشتر در مورد سفارشی کردن نقشهها، راهنمای طراحی و طراحی روی نقشه را بخوانید.
- از Developer Tools Console در مرورگر وب خود برای آزمایش و اجرای کد، خواندن گزارش های خطا و حل مشکلات کد خود استفاده کنید.
- برای باز کردن کنسول در کروم از میانبرهای صفحه کلید زیر استفاده کنید:
Command+Option+J (در مک)، یا Control+Shift+J (در ویندوز). مراحل زیر را برای دریافت مختصات طول و عرض جغرافیایی برای یک مکان در Google Maps دنبال کنید.
- Google Maps را در مرورگر باز کنید.
- روی مکان دقیقی که برای آن مختصات نیاز دارید کلیک راست کنید.
- از منوی زمینه ای که ظاهر می شود ، What's here را انتخاب کنید. نقشه یک کارت را در پایین صفحه نمایش می دهد. مختصات طول و عرض جغرافیایی را در ردیف آخر کارت بیابید.
با استفاده از سرویس Geocoding می توانید یک آدرس را به مختصات طول و عرض جغرافیایی تبدیل کنید. راهنماهای توسعه دهنده اطلاعات دقیقی را در مورد شروع به کار با سرویس Geocoding ارائه می دهند.