تبلیغات تبلیغات
حراجی دامنه های ویژهمشاهده
آخرین ارسال های تالار مشاهده انجمن
مشکل در کد کیچا اسکریپت آپلود سنتر کلیجا 9 پاسخ 58 بازدید کتابخانه blog برای لاراول 1 پاسخ 142 بازدید مشکل در نصب اسکریپت 1 پاسخ 37 بازدید وردپرس شبکه 1 پاسخ 44 بازدید اسکریپت یا کد انتقال دهنده کاربر به صفحه 2 پاسخ 163 بازدید درخواست افزونه 3 پاسخ 767 بازدید اسکریپت مدیریت هاست رایگان 3 پاسخ 335 بازدید معرفی وبسایت خرید آنلاین مواد و لوازم دندانپزشکی 0 پاسخ 151 بازدید افزونه Coins MarketCap 1 پاسخ 566 بازدید درخواست پلاگین 4 پاسخ 825 بازدید
تبلیغات
تبلیغات تبلیغات

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

CSS , HTML5 , آموزش ها , اسکریپت ها , مقالات,آموزش,ترفند

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

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

 

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

 

برای این کار کافیست ابتدا کدهای جاوا اسکریپت زیر را در بین تگ head در بالای وب سایت خود قرار دهید :

<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
var myCenter=new google.maps.LatLng(35.725514,51.411389);
 
function initialize()
{
var mapProp = {
  center: myCenter,
  zoom:17,
  mapTypeId: google.maps.MapTypeId.ROADMAP
  };
 
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
 
var marker = new google.maps.Marker({
  position: myCenter,
  title:'Click to zoom'
  });
 
marker.setMap(map);
 
// Zoom to 1 when clicking on marker
google.maps.event.addListener(marker,'click',function() {
  map.setZoom(1);
  map.setCenter(marker.getPosition());
  });
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

حال div ( دیویژن ) زیر را در تگ body و در هر قسمتی که میخواهید در وب سایت نمایش داده شود کپی نمایید :

<div id="googleMap" style="width:600px;height:350px;"></div>

نکته 1 : در این خط (var myCenter=new google.maps.LatLng(35.725514,51.411389 , به جای دو شماره آخر این خط , شما باید مکان جغرافیایی که همان x و y مکان شما در نقشه میباشد را بنویسید . برای راحتی کار میتوانید به آدرس http://map.google.com بروید و در آنجا مکان دلخواه خود را بیابید , سپس بر روی همان نقطه از نقشه که میخواهید کلیک راست نمایید و سپس گزینه ?what’s here را انتخاب نمایید . با این کار میبینید که در بالا سمت چپ صفحه , نقاط x و y مکان شما نمایان میشود .

نکته 2 : در این خط zoom:17 , به جای عدد 17 میتوانید زوم پیش فرض نقشه خود را انخاب نمایید . طبیعتا هر چه کمتر باشد , مکان شما از دورتر و بالاتر نمایش داده میشود و هر چه بیشتر باشد مکان شما نزدیکتر و پایین تر در نقشه نمایش داده میشود . ( 17 عدد مناسبی است ) .

نکته 3 : در خط مربوط به div که برای نمایش این نقشه در مکان دلخواه شما میباشد , میتوانید اندازه width و hright نقشه رو کمتر و بیشتر نمایید تا به اندازه دلخواه خود برسید . ( پیش فرض 600 در 350 میباشد ).

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

این مقاله چقدر براتون مفید بود؟

از ۱ تا ۵ امتیاز بدید.

میانگین رتبه 0 / 5. تعداد رای : 0

تا حالا کسی رای نداده! اولین نفر شما باشید.

دانلود

هاست ارزان، لایت اسپید، سرور مجازی منطبق با اسکریپت های 20script کلیک کنید >
مطلب مفیدی بود ؟
نویسنده : تیم محتوای 20اسکریپت 6 CSS , HTML5 , آموزش ها , اسکریپت ها , مقالات,آموزش,ترفند
لینک کوتاه مطلب : https://www.20script.ir/?p=13340
کلمات کلیدی پست :
مطالب مرتبط
8,559اسکریپت اشتراک گذاری فایل Simple File Sharer نسخه 2.27 تاریخ : 2016/09/5
10,469دانلود اسلایدر بسیار زیبا جی کوئری تاریخ : 2013/11/25
8,761افزونه اسلایدر قدرتمند RoyalSlider نسخه 3.2.3 برای وردپرس تاریخ : 2014/11/22
15,107اسکریپت افزایش بازدید و تبادل ترافیک Booster Traffic Exchange System تاریخ : 2016/07/9
7,049قالب وبلاگ و مجله اینترنتی Gadgetry برای وردپرس تاریخ : 2016/03/25
16,051افزونه وردپرس استفاده از گوگل درایو به عنوان CDN نسخه 1.8.1 تاریخ : 2015/02/23
16,866اسکریپت ساخت آزمون آنلاین SocioQuiz نسخه 1.1.2 تاریخ : 2016/06/26
10,036اسکریپت 10 طرح نوتیفیکیشن آماده Multipurpose Notification Layout تاریخ : 2018/06/12
7,823اسکریپت نمایش بارگذاری صفحه ChilliLoader تاریخ : 2014/02/4
11,796قالب زیبای گپ فارسی برای شیرترانیکس تاریخ : 2014/04/17
8,972اسکریپت ایجاد پلتفرم وام دهی با بیت کوین Lending تاریخ : 2019/05/14
9,320اسکریپت مدیریت بیمارستان و درمانگاه Bayanno Hospital تاریخ : 2013/11/30
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت هاقالب عشق بین انگشت ها
قالب دخترونه و آرایشقالب دخترونه و آرایش
قالب زیبای ماشینقالب زیبای ماشین
قالب فانتزی و طنز چِشمقالب فانتزی و طنز چِشم
قالب دختر رویاییقالب دختر رویایی
قالب وبلاگ دکوراسیونقالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درختقالب وبلاگ کلبه و درخت
قالب دختر زیباقالب دختر زیبا
قالب پسرونه غمگینقالب پسرونه غمگین
قالب عاشقانه قلبقالب عاشقانه قلب
تبلیغات
تبلیغات