Places UI Kit : یک کتابخانه آماده برای استفاده که فضایی را برای سفارشی‌سازی و توسعه کم کد فراهم می‌کند. آن را امتحان کنید و نظرات خود را در مورد تجربه کیت UI خود به اشتراک بگذارید.

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

یک نقشه گوگل را به یک صفحه وب اضافه کنید

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

اضافه کردن نقشه با استفاده از عنصر gmp-map
اضافه کردن نقشه با استفاده از عنصر div و جاوا اسکریپت
تنظیم و دریافت ویژگی‌ها روی نمونه نقشه

نمای کلی

برای بارگذاری یک نقشه، صفحه وب شما باید موارد زیر را انجام دهد:

API جاوا اسکریپت Maps را با استفاده از یک bootstrap loader بارگذاری کنید . اینجا جایی است که کلید API شما ارسال می‌شود. می‌توان آن را به فایل‌های منبع HTML یا جاوا اسکریپت اضافه کرد.
نقشه را به صفحه HTML اضافه کنید و استایل‌های CSS مورد نیاز را اضافه کنید.
کتابخانه maps را بارگذاری کنید و نقشه را مقداردهی اولیه کنید.

اضافه کردن نقشه با استفاده از عنصر `gmp-map`

عنصر gmp-map روش ترجیحی برای اضافه کردن نقشه گوگل به یک صفحه وب است. این یک عنصر HTML سفارشی است که با استفاده از اجزای وب ایجاد شده است. برای اضافه کردن نقشه به یک صفحه وب با استفاده از عنصر gmp-map ، مراحل زیر را انجام دهید.

یک عنصر script حاوی bootstrap را به یک صفحه HTML اضافه کنید، یا آن را به یک فایل منبع جاوا اسکریپت یا TypeScript بدون عنصر script اضافه کنید. bootstrap را با کلید API خود و هر گزینه دیگری پیکربندی کنید. می‌توانید یا وارد کردن کتابخانه پویا یا بارگیری مستقیم اسکریپت را انتخاب کنید. این مثال اضافه کردن bootstrap بارگیری اسکریپت پویا به یک صفحه HTML را نشان می‌دهد:

<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 جاوا اسکریپت نقشه‌های گوگل بیشتر بدانید

در صفحه HTML، یک عنصر gmp-map اضافه کنید. مختصات عرض و طول جغرافیایی را برای center (الزامی)، مقدار zoom (الزامی) و در صورت نیاز یک شناسه نقشه ( map-id مشخص کنید (برای برخی از ویژگی‌ها مانند نشانگرهای پیشرفته لازم است).

<gmp-map center="-34.397,150.644" zoom="8" mapId="DEMO_MAP_ID">
</gmp-map>index.html

کد مثال کامل

تایپ اسکریپت

async function initMap(): Promise<void> {
    // Import the needed libraries.
    await google.maps.importLibrary('maps');

    // Create the map.
    const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
    // Access the underlying map object.
    const innerMap = mapElement.innerMap;
}

initMap();index.ts

جاوا اسکریپت

async function initMap() {
    // Import the needed libraries.
    await google.maps.importLibrary('maps');
    // Create the map.
    const mapElement = document.querySelector('gmp-map');
    // Access the underlying map object.
    const innerMap = mapElement.innerMap;
}
initMap();index.js

سی‌اس‌اس

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}
style.css

اچ‌تی‌ام‌ال

<html>
    <head>
        <title>Simple Map</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <!-- 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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly" });</script>
    </head>

    <body>
        <gmp-map center="-34.397,150.644" zoom="8" mapId="DEMO_MAP_ID">
        </gmp-map>
    </body>
</html>index.html

نمونه را امتحان کنید

JSFiddle.net

اضافه کردن نقشه با استفاده از عنصر `div` و جاوا اسکریپت

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

یک عنصر script حاوی bootstrap را به یک صفحه HTML اضافه کنید، یا آن را به یک فایل منبع جاوا اسکریپت یا TypeScript بدون عنصر script اضافه کنید. bootstrap را با کلید API خود و هر گزینه دیگری پیکربندی کنید. می‌توانید یا وارد کردن کتابخانه پویا یا بارگیری مستقیم اسکریپت را انتخاب کنید. این مثال اضافه کردن bootstrap پویا به یک صفحه HTML را نشان می‌دهد:

<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 جاوا اسکریپت نقشه‌های گوگل بیشتر بدانید

در صفحه HTML، یک عنصر div اضافه کنید تا نقشه در آن قرار گیرد.
```
<div id="map"></div>
```
در CSS، ارتفاع نقشه را روی ۱۰۰٪ تنظیم کنید. ویژگی height در CSS برای قابل مشاهده بودن نقشه الزامی است.
```
#map {
  height: 100%;
}
```
در فایل JS یا TS، تابعی برای بارگذاری کتابخانه maps و مقداردهی اولیه نقشه ایجاد کنید. مختصات طول و عرض جغرافیایی را برای center و سطح بزرگنمایی مورد استفاده برای zoom مشخص کنید. در صورت نیاز، با استفاده از ویژگی mapId ، یک شناسه نقشه اضافه کنید. از آنجایی که نقشه به طور پیش‌فرض به صورت رستری خواهد بود، با مشخص کردن گزینه نقشه "VECTOR" یک نقشه برداری درخواست کنید. نوع نقشه برداری برای بهترین تجربه کاربری توصیه می‌شود، زیرا علاوه بر قابلیت کنترل شیب و جهت روی نقشه، وضوح بصری بهتری را ارائه می‌دهد.
} }
تایپ اسکریپت
let map: google.maps.Map; async function initMap(): Promise<void> { // Import the needed libraries const { Map, RenderingType } = (await google.maps.importLibrary( 'maps' )) as google.maps.MapsLibrary; // Create a new map from the div with id="map". map = new Map(document.getElementById('map') as HTMLElement, { center: { lat: -34.397, lng: 150.644 }, zoom: 8, renderingType: "VECTOR", }); >initMap();
index.ts
نکته: راهنمای استفاده از TypeScript و Google Maps را مطالعه کنید.
جاوا اسکریپت
let map; async function initMap() { // Import the needed libraries const { Map, RenderingType } = (await google.maps.importLibrary('maps')); // Create a new map from the div with id="map". map = new Map(document.getElementById('map'), { center: { lat: -34.397, lng: 150.644 }, zoom: 8, renderingType: "VECTOR", }); >initMap();
index.js

کد منبع کامل مثال را ببینید

تایپ اسکریپت

let map: google.maps.Map;
async function initMap(): Promise<void> {
    // Import the needed libraries
    const { Map, RenderingType } = (await google.maps.importLibrary(
        'maps'
    )) as google.maps.MapsLibrary;

    // Create a new map from the div with id="map".
    map = new Map(document.getElementById('map') as HTMLElement, {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8,
        renderingType: "VECTOR",
    });
}

initMap();index.ts

جاوا اسکریپت

let map;
async function initMap() {
    // Import the needed libraries
    const { Map, RenderingType } = (await google.maps.importLibrary('maps'));
    // Create a new map from the div with id="map".
    map = new Map(document.getElementById('map'), {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8,
        renderingType: "VECTOR",
    });
}
initMap();index.js

سی‌اس‌اس

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

<head>
    <title>Simple Map</title>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>

    <!-- 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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly" });</script>
    </body>
</head>

<body>
    <div id="map"></div>
</body>

</html>index.html

نمونه را امتحان کنید

JSFiddle.net

تنظیم و دریافت ویژگی‌ها روی نمونه نقشه

برای تعامل با نمونه نقشه، عنصر حاوی آن را انتخاب کنید. کدی که این کار را انجام می‌دهد بسته به اینکه از عنصر gmp-map یا یک عنصر div استفاده کرده‌اید، متفاوت خواهد بود.

دریافت یک نمونه نقشه از یک عنصر `gmp-map`

برای دریافت نمونه نقشه هنگام استفاده از عنصر gmp-map ، از document.querySelector برای بازیابی نمونه mapElement استفاده کنید، همانطور که در اینجا نشان داده شده است.

const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;

سپس ویژگی‌ها را روی نمونه mapElement تنظیم کنید:

mapElement.zoom = 8;

کلاس MapElement به صورت داخلی از کلاس Map استفاده می‌کند؛ برای دسترسی به کلاس Map ، از ویژگی MapElement.innerMap استفاده کنید، همانطور که در اینجا نشان داده شده است:

mapElement.innerMap.setOptions({
    mapTypeControl: false,
});

دریافت یک نمونه نقشه از یک عنصر `div`

هنگام استفاده از یک عنصر div ، نمونه نقشه را دریافت کنید و گزینه‌ها را در زمان مقداردهی اولیه تنظیم کنید:

map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
    mapTypeControl: false,
});

پس از مقداردهی اولیه، گزینه‌های روی نمونه map را همانطور که در اینجا نشان داده شده است، تنظیم کنید:

map.setOptions({
    zoom: 8,
});

یک نقشه گوگل را به یک صفحه وب اضافه کنید با مجموعه‌ها، منظم بمانید ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.

نمای کلی

اضافه کردن نقشه با استفاده از عنصر gmp-map

کد مثال کامل

تایپ اسکریپت

جاوا اسکریپت

سی‌اس‌اس

اچ‌تی‌ام‌ال

نمونه را امتحان کنید

اضافه کردن نقشه با استفاده از عنصر div و جاوا اسکریپت

تایپ اسکریپت

جاوا اسکریپت

کد منبع کامل مثال را ببینید

تایپ اسکریپت

جاوا اسکریپت

سی‌اس‌اس

اچ‌تی‌ام‌ال

نمونه را امتحان کنید

تنظیم و دریافت ویژگی‌ها روی نمونه نقشه

دریافت یک نمونه نقشه از یک عنصر gmp-map

دریافت یک نمونه نقشه از یک عنصر div

یک نقشه گوگل را به یک صفحه وب اضافه کنید

اضافه کردن نقشه با استفاده از عنصر `gmp-map`

اضافه کردن نقشه با استفاده از عنصر `div` و جاوا اسکریپت

دریافت یک نمونه نقشه از یک عنصر `gmp-map`

دریافت یک نمونه نقشه از یک عنصر `div`