گوگل مپ (Google Map) یکی از قابلیت هایی است که به صورت گسترده برای یک وبسایت استفاده می شود و شما به راحتی می توانید با آموزش افزودن گوگل مپ به سایت ، Google Map را به وبسایت خود اضافه کنید .ما از API گوگل مپ برای افزودن گوگل مپ به سایت و نمایش مکان دلخواه استفاده می کنیم . همچنین یک لینک مستقیم بر روی نقشه قرارا می دهیم که به کاربران اجازه دریافت مسیر را می دهد. اول از همه ، شما نیاز دارید که عرض و طول جغرافیایی مکان دلخواهتان را بدست بیارید . مراحل زیر را برای دریافت طول و عرض جغرافیایی از گوگل مپ را دنبال کنید .
- به سایت گوگل مپ بروید .
- منطقه (Location) مورد نظر را وارد و جستجو کنید
- Location دقیق را بر روی گوگل مپ علامت گذاری کنید
- یک علامت بر روی مکانی که انتخاب کردید ظاهر می شود و همچنین یک متن پیغام زیر نقشه به نمایش در میاد.
- در این متن پیغام ، شما جزئیات آدرس ، طول و عرض جغرافیایی را می بینید .
- طول و عرض جغرافیایی را برای افزودن گوگل مپ به سایت نیاز داریم
کد های زیر را داخل صفحه HTML خود ، جایی که نیاز به افزودن گوگل مپ به سایت دارید ، قرار بدید
جاواسکریپت :
در کد جاوا اسکریپت زیر ، شما کافیست طول و عرض جغرافیایی مکان مورد نظر را در متد LatLng() قرار بدید.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<script src="https://maps.googleapis.com/maps/api/js"></script> <script> var myCenter = new google.maps.LatLng(37.422230, -122.084058); function initialize(){ var mapProp = { center:myCenter, zoom:12, mapTypeId:google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map"),mapProp); var marker = new google.maps.Marker({ position:myCenter, }); marker.setMap(map); } google.maps.event.addDomListener(window, 'load', initialize); </script> |
HTML :
به کد<div id=”map”></div> برای نمایش نقشه نیاز دارید . تگ HTML دیگر برای نمایش لینک مستقیم مکان بر روی گوگل مپ استفاده شده است.
|
1 2 3 4 |
<div class="mapContainer"> <a itemprop="url" class="direction-link" target="_blank" href="//maps.google.com/maps?f=d&daddr=37.422230,-122.084058&hl=en"> Get Directions</a> <div id="map"></div> </div> |
CSS :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
#map {width: 100%;height: 400px;} .mapContainer{width:50%;position: relative;} .mapContainer a.direction-link { position: absolute; top: 15px; right: 15px; z-index: 100010; color: #FFF; text-decoration: none; font-size: 15px; font-weight: bold; line-height: 25px; padding: 8px 20px 8px 50px; background: #0094de; background-image: url('direction-icon.png'); background-position: left center; background-repeat: no-repeat; } .mapContainer a.direction-link:hover { text-decoration: none; background: #0072ab; color: #FFF; background-image: url('direction-icon.png'); background-position: left center; background-repeat: no-repeat; } |
خب کافیه . همه کد ها در کنار هم در یک صفحه وب قرار بدید .و شما نقشه گوگل مپ را مانند عکس زیر خواهید دید
دیدید با مقاله افزودن گوگل مپ به سایت در ۵ دقیقه به چه راحتی تونستیم نقشه مکان فعالیت ، شرکت ، دفترکار ، کارگاه و … را بسازیم و الان می توانید این نقشه را به صفحه وب یا مثلا صفحه تماس با ما ، درباره ما اضافه کنید. موفق و پیروز باشید
سلام دوستان .ببخشید من میخوام گوگل مپ رو از سایت زیر به سایتی که دارم میسازم اصافه کنیم اصافه کنم ولی فکر کنم بخاطر تحریم هایی که علیه ایران شده اسم ایران تو این سایت برای ثبت نام وجود ندارد .اگه کسی میدونه راهنمایی کنه که چطور میتونم این کار رو انجام بدم
https://console.cloud.google.com/getting-started
سلام ممنون از سایت خوبتون من در یک سایت باید تمام مکانهای مهم نزدیک ساختمان مسکونی را نشان بدم مثل رستورانها یا مراکز تفریحی با کلیک روی گزینه مورد نظر.جکار باید انجام بدم؟لطفا راهنمایی کنید
سلام. خوشحالیم که مفید واقع شده.
بله میتونید و باید داکیومنت api گوگل مپ رو کامل مطالعه و از کدهای آماده و مثال آن استفاده کنید.
https://developers.google.com/maps/documentation
موفق باشید.
سلام .
خیلی ممنون از راهنماییتون خیلی بهم کمک کرد
سلام . خسته نباشید .
آیا در مورد اضاف کردن نقشه به سایت طوری که کاربر مکان دقیق رو از روی نقشه انتخاب کنه و براش ذخیره بشه تو دیتابیس اطلاعی دارید ؟
ممنون میشم در این مورد راهنمایی کنید .
سلام . ممنونم. بله به راحتی می توانید این قابلیت را پیاده سازی و محل انتخابی کاربر را ذخیره کنید.
لطفا لینک زیر را مطالعه کنید چرا که کدهای جاوااسکریپت لازم برای این کار قرار داده شده
https://stackoverflow.com/questions/31342426/google-maps-embed-in-html-form-and-save-user-selected-location-in-mysql-database
موفق باشید.
سلام پالان دیگه امکان استفاده از این سرویس ظاهرا نیست بدلیل تحریم های آمریکا . ایا راه حلی وجود دارد که در ایران بشه از این سرویس استفاده کرد . سرورها در ایران قراردارند؟
سلام . اگر سرورهای سایت شما در ایران قرار دارند متاسفانه کاری نمیشه انجام داد فقط میتونید جستجو کنید اگر سایت واسطه ای api ای برای اتصال به گوگل مپ را داشته باشد به براحتی میتونید از آن api واسطه بهره ببرید.
موفق باشید.
لطفا در مورد هدفمنی این سرویس بیشتر
توضیح دهید
سلام .
بیشتر برای نمایش مسیر نقشه ای شرکت یا کارخانه , دفتر یا هر منظقه ای که خواستید استفاده میشه که میتونید در بخش تماس با ما یا درباره ما سایت خود قرار بدید
موفق باشید