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

01 از 05

دریافت یک کلید API نقشه های Google برای سایت شما

نمای کلی از کنسول Google Developers. صفحه نمایش توسط J Kyrnin گرفته شده است

بهترین روش برای اضافه کردن یک نقشه Google به وب سایت شما، استفاده از Google Maps API است. و گوگل توصیه می کند که یک کلید API برای استفاده از نقشه دریافت کنید.

شما لازم نیست که یک کلید API برای استفاده از Google Maps API v3 بدست آورید، اما بسیار مفید است زیرا به شما اجازه می دهد تا استفاده خود را نظارت کنید و برای دسترسی اضافی پرداخت کنید. Google Maps API v3 دارای سهمیه ای 1 درخواست در هر ثانیه برای هر کاربر به حداکثر 25000 درخواست در روز است. اگر صفحات شما از این محدودیت ها فراتر نرود، برای دریافت بیشتر باید بایستی فعال سازی کنید.

نحوه دریافت یک کلید API نقشه های Google

  1. با استفاده از حساب Google خود، به Google وارد شوید
  2. به کنسول توسعه دهندگان بروید
  3. از طریق لیست بروید و API نقشه گوگل V3 را پیدا کنید، سپس روی دکمه "OFF" کلیک کنید تا آن را روشن کنید.
  4. شرایط را بخوانید و با آنها موافقت کنید.
  5. به کنسول API ها بروید و "API Access" را از منوی سمت چپ انتخاب کنید
  6. در قسمت "Simple API Access" روی دکمه "ایجاد سرور جدید ..." کلیک کنید.
  7. آدرس آی پی سرور وب خود را وارد کنید. این IP است که در آن درخواستهای Maps شما از آنجا می آید. اگر شما آدرس IP خود را نمی دانید، می توانید آن را جستجو کنید.
  8. متن را در خط "API key:" کپی کنید (از جمله آن عنوان). این کلید API شما برای نقشه های شماست.

02 از 05

آدرس شما را به مختصات تبدیل کنید

از شماره های نشان داده شده برای طول و عرض جغرافیایی استفاده کنید. صفحه نمایش توسط J Kyrnin گرفته شده است

برای استفاده از نقشه های گوگل در صفحات وب شما، باید طول و عرض جغرافیایی محل را داشته باشید. شما می توانید این را از یک GPS دریافت کنید یا می توانید از یک ابزار آنلاین مانند Geocoder.us به شما بگویم.

  1. به Geocoder.us بروید و آدرس خود را در کادر جستجو تایپ کنید.
  2. شماره اول را برای عرض جغرافیایی (بدون یک نامه در مقابل) کپی کنید و آن را در یک فایل متنی قرار دهید. شما به شاخص (º) نیاز ندارید.
  3. شماره اول را برای طول جغرافیایی (دوباره بدون یک حرف در جلو) کپی کنید و آن را در فایل متنی خود قرار دهید.

طول و عرض جغرافیایی شما چیزی شبیه به این خواهد بود:

40.756076
-73.990838

Geocoder.us فقط برای آدرس های ایالات متحده کار می کند، اگر شما نیاز به گرفتن مختصات در یک کشور دیگر، شما باید یک ابزار مشابه در منطقه خود را جستجو کنید.

03 از 05

اضافه کردن نقشه به صفحه وب شما

نقشه های گوگل صفحه نمایش توسط J Kyrnin گرفته شده است - نقشه تصویر حسن نیت ارائه میدهد گوگل

ابتدا اسکریپت نقشه را به آن اضافه کنید

از سند شما

صفحه وب خود را باز کنید و به HEAD سند خود اضافه کنید.

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

دوم، عنصر نقشه را به صفحه خود اضافه کنید

هنگامی که تمام عناصر اسکریپت را به HEAD سند خود اضافه کرده اید، باید نقشه خود را در صفحه قرار دهید. شما این کار را با اضافه کردن عنصر DIV با ویژگی id = "map-canvas" انجام می دهید. من توصیه می کنم شما همچنین سبک این div با عرض و ارتفاع که در صفحه شما مناسب است:

سرانجام آپلود و تست

آخرین چیزی که باید انجام دهید این است که صفحه خود را آپلود کنید و تست کنید که صفحه نمایش شما نمایش داده شود. در اینجا یک نمونه از یک نقشه Google در صفحه است. توجه داشته باشید که به دلیل اینکه CMS CMS کار می کند، شما باید روی یک لینک کلیک کنید تا نقشه ظاهر شود. این در مورد صفحه شما صادق نیست.

اگر نقشه شما نشان نمی دهد، ابتدا آن را با یک ویژگی BODY امتحان کنید:

onload = "initialize ()" >

چیزهای دیگر برای بررسی اینکه آیا نقشه شما بارگیری نیست، شامل موارد زیر است:

04 از 05

مارکر را به نقشه خود اضافه کنید

نقشه گوگل با نشانگر صفحه نمایش توسط J Kyrnin گرفته شده است - نقشه تصویر حسن نیت ارائه میدهد گوگل

اما اگر یک مارک به مردم می گوید که در آن باید برود چه نقشه ای برای مکان شماست؟

برای اضافه کردن نشانگر قرمز Google Maps استاندارد، زیر را به اسکریپت زیر در زیر var map = ... line اضافه کنید:

var myLatlng = google.maps.LatLng جدید ( عرض جغرافیایی، طول جغرافیایی
var marker = new google.maps.Marker ({
موقعیت: myLatlng
نقشه: نقشه
عنوان: " دفتر مرکزی سابق "
})؛

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

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

var latlng 2 = google.maps.LatLng جدید ( 37.3316591، -122.0301778
var myMarker 2 = جدید google.maps.Marker ({
موقعیت: latlng 2 ،
نقشه: نقشه
عنوان: " Apple Computer "
})؛

در اینجا یک نمونه از یک نقشه Google با نشانگر است. توجه داشته باشید، به این دلیل که CMS سیستم عامل کار می کند، شما باید روی یک لینک کلیک کنید تا نقشه ظاهر شود. این در مورد صفحه شما صادق نیست.

05 از 05

یک نقشه دوم (یا بیشتر) را به صفحه خود اضافه کنید

اگر به صفحه نقشه گوگل خود نگاه کردید متوجه خواهید شد که من بیش از یک نقشه نمایش داده شده در صفحه دارد. انجام این کار خیلی آسان است. چطوره؟

  1. همانطور که در مرحله 2 این آموزش یاد گرفتیم، طول و عرض جغرافیایی تمام نقشه هایی را که می خواهید نمایش دهید.
  2. همانطور که در مرحله 3 این آموزش آموخته ایم، اولین نقشه را وارد کنید. اگر می خواهید نقشه دارای نشانگر باشد، نشانگر را مانند مرحله 4 اضافه کنید.
  3. برای نقشه دوم، شما باید 3 خط جدید به اسکریپت initialize () خود اضافه کنید:
    var latlng2 = google.maps.LatLng جدید ( مختصات دوم
    var myOptions2 = {زوم: 18، مرکز: latlng2، mapTypeId: google.maps.MapTypeId.ROADMAP}؛
    var map2 = google.maps.Map جدید (document.getElementById ("map_canvas_2")، myOptions2)؛
  4. اگر می خواهید نشانگر را روی نقشه جدید نیز اضافه کنید، نشانگر دوم را که در مختصات دوم و نقشه دوم قرار دارد اضافه کنید:
    var myMarker2 = new google.maps.Marker ({position: latlng2 ، map: map2 ، title: عنوان " عنوان نشانگر شما "})؛
  5. سپس دوم را اضافه کنید

    جایی که نقشه دوم را می خواهید. و مطمئن شوید ID شناسه = "map_canvas_2" را به آن بدهید.

  6. هنگامی که صفحه شما بارگذاری می شود، دو نقشه نمایش داده می شود

در اینجا کد صفحه با دو نقشه Google روی آن است: