API نمایش نقشه گوگل در وب سایت

نقشه گوگل

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

در این مقاله میخوام شما را با نحوه پیاده سازی این امکان برای وب سایت های خود آشنا کنم فقط بگم خیلی سادست و فقط نیاز به API دارید.

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

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

در این روشی که باهم برسی خواهیم کرد ، برای ادغام API نقشه ی گوگل در صفحه ی وبتان مورد استفاده است….

گام اول: ساخت کلید برنامه

قبل از ادغام نقشه ی گوگل باید یک کلید برنامه از گوگل تولید کنید. از روش زیر استفاده کنید :

به این صفحه سر بزنید : https://code.google.com/apis/console/

در صفحه ای که ظاهر میشود بر روی دکمه ی ساخت پروژه کلیک کنید.

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

میتوانید Google Maps API v3 را در میان آنها که به صورت خاموش قرار دارد  روی آن کلیک کنید. شرایط و ضوابط را تایید کنید تا آن را فعال کنید.

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

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

کلید API را از آنجایی که ما از آن در طول اجرا استفاده میکنیم ذخیره کنید.

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

گام اول شما را در ساخت یک کلید برنامه راهنمایی میکند و در روش زیر میتوانید ببینید که چگونه یک API نقشه گوگل در وب سایتتان بسازید.

Script tag خود را وارد کنید


script src = http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEYamp;sensor=TRUE_OR_FALSE  /script

تگ <script> به شما اجازه میدهد تا نقشه ی گوگل را در صفحه تان اضافه کنید.

پس از “key=” در قسمت آدرس نیاز به وارد کردن کلید برنامه مان را داریم.

پارامتر Query String بعدی خصوصیت “Sensor” با حساسیت True یا False میباشد.

اگر سنسور هایی مانند یک GPS برای ردیابی موقعیت کاربر در حال استفاده باشد , موجود خواهد بود.

اگر برنامه ی شما نیاز به استفاده از HTTP connection امن داشته باشید آنگاه از src=”https:..” استفاده کنید.

مقداردهی اولیه نقشه گوگل

برای بارگذاری نقشه نیاز به مقداردهی اولیه ی آن دارید.

function loadScript()   

{  

var script = document.createElement(script);  

script.src = http://maps.googleapis.com/maps/api/js? key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&amp;amp;sensor=false&amp;amp;callback=initialize;  

document.body.appendChild(script);  

}  

window.onload = loadScript


بهترین راه مقداردهی اولیه ی نقشه در بارگذاری میباشد.

در اینجا بارگذاری ناهمگام اتفاق می افتد. بارگذاری نقشه به بارگذاری صفحه بستگی ندارد.

مشخص کردن موقعیت نقشه

زمانی که نقشه در حین بارگذاری مقداردهی اولیه شد باید عرض و طول جغرافیایی همانند زیر داده شود :

var mapProp = 
{center:new google.maps.LatLng(51.508742,-0.120850),zoom:7,mapTypeId: google.maps.MapTypeId.ROADMAP};

در اینجا mapProp یک شئ با ویژگی هایی نظیر Center , Zoom , mapTypeId و … است.

ویژگی ها همانند زیر لیست میشوند :

  • Center : این ویژگی به شما اجازه میدهد که موقعیت نقشه را با اطلاعات طول و عرض جغرافیایی تعیین کنید.
  • Zoom : به شما اجازه ی زوم کردن بر موقعیتی را میدهد. مقدار زوم بر نقشه را مقداردهی اولیه میکند.
  • MapTypeId : مشخص میکند که کدام مقداردهی اولیه نوع نقشه را نمایش دهد. انواع نقشه های زیر در این API پشتیبانی میشود :
  • ROADMAP : بارگذاری دو نقشه ی ساده و پیش فرض بعدی
  • SATELLITE : بارگذاری نقشه ی تصویری
  • HYBIRD : بارگذاری نقشه ی تصویری با جاده و نام شهر ها
  • TERRAIN : بارگذاری نماهایی از کوه ها رودخانه ها و غیره

نمایش نقشه در صفحه ی HTML

div id=googleMap style=width:500px;height:380px;
/div

این API نقشه ی گوگل بر اساس Id استفاده شده تابع JavaScript بنام Map بارگذاری میشود.

var map=new google.maps.Map(document.getElementById(googleMap),mapProp);

برای مقداردهی اولیه نقشه در حین بارگذاری از تابع JavaScript زیر استفاده میکنیم :

google.maps.event.addDomListener(window, 'load', initialize);

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

افزودن نشانگر به نقشه ی گوگل میتواند Overlays نامیده شود.

متد Marker و setMap برای تعیین یک نشانگر به کار میرود.

یک نشانگر چیست ؟

نشانگر در API نقشه ی گوگل برای ردیابی یک مکان بکار میرود. میتوانید نشانگر را با استفاده از ویژگی Animation.BOUNCE تحرک ببخشید.

Polylines

Polyline ها برای نشانه گذاری چندین طول و عرض جغرافیایی بر روی API نقشه گوگل به کارمی رود.

var myTrip = [stavanger,amsterdam,london];var flightPath = new google.maps.Polyline({path:myTrip,strokeColor:#0000FF,strokeOpacity:0.8,strokeWeight:2});

ویژگی هایی همانند زیر دارد :

  • Path : مشخص کردن چندین اطلاعات مختصات طول و عرض جغرافیایی برای یک خط.
  • StrokeColor : مشخص کردن رنگ حرکت بر روی نقشه
  • StrokeOpacity : مشخص کردن شفافیت نقشه. بازه ی آن از ۰.۰ تا ۱.۰ .
  • StrokeWeight : مشخص کردن وزن شفافیت.

Polygon

مشابه Polyline است اما این فرم ها حلقه های بسته ای با سه ویژگی بیشتری مانند fillColor و fillOpacity و editable.

Circle

یک دایره بر روی نقشه می اندازد.

InfoWindow

به شما امکان کشیدن یک infoWindow بر روی نقشه میدهد. یک مثال ساده در زیر آورده شده است :

infowindow = new google.maps.InfoWindow({content:Hello World!});infowindow.open(map,marker);

گام ۴ : به API نقشه ی گوگل تان رویداد بیافزایید

دو رویداد اصلی در API نقشه ی گوگل وجود دارد . یکی رویداد کلیک و رویداد دیگر بازگشت Pan به رویداد نشانه گر است.

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

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

این رویداد ها همچنین میتوانند برای ساخت یک infoWindow برای در رویداد کلیک استفاده شوند.

  • پسورد: www.mspsoft.com
داریوش فرخی

داریوش فرخی هستم از سال 92 شروع به یادگیری برنامه نویسی و از سال 93 در بخش برنامه نویسی و تولید محتوای سایت mspsoft.com مشغول هستم. فعالیتم نیز بیشتر در زمینه های برنامه نویسی با سی شارپ و asp.net بوده است. اوقات فراغتم را هم غالبا با تماشای فیلم یا بازی های کامپیوتری پر میکنم .

نوشته‌های مرتبط

دیدگاه‌ها

*
*

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.