تبلیغات تبلیغات
حراجی دامنه های ویژهمشاهده

تبلیغات
تبلیغات تبلیغات

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

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 میباشد ).

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

دانلود

هاست ارزان، لایت اسپید، سرور مجازی منطبق با اسکریپت های 20script کلیک کنید >
انتقال و خرید دامنه 5000 تومان! | کد تخفیف: limoo-ir-5s ثبت دامنه >
مطلب مفیدی بود ؟
نویسنده : تیم محتوای 20اسکریپت 6 CSS , HTML5 , آموزش ها , اسکریپت ها , مقالات,آموزش,ترفند
لینک کوتاه مطلب : https://www.20script.ir/?p=13340
کلمات کلیدی پست :
مطالب مرتبط
10,623اسکریپت jQuery نمایش وضعیت آب و هوا Flat Weather تاریخ : 2015/09/2
6,468اسکریپت چک کردن رتبه گوگل تاریخ : 2014/01/12
18,796ابزارک دسته بندی ووکامرس به صورت درختی (اکوردئون) تاریخ : 2017/11/10
6,716طراحی قالب HTML به صورت آنلاین با اسکریپت Architect نسخه 1.2 تاریخ : 2015/03/9
6,054پوسته چندمنظوره Nayma برای وردپرس تاریخ : 2016/07/11
4,364اسکریپت ایجاد دایرکتوری کسب و کار Atlas تاریخ : 2019/10/16
7,770اسکریپت فروشگاه ماشین Car Dealer v1.0.8 تاریخ : 2014/01/23
6,780قالب سفید برای Whmcs تاریخ : 2013/12/31
11,220قالب زیبای گپ فارسی برای شیرترانیکس تاریخ : 2014/04/17
7,066اسکریپت مدیریت هاستینگ و صورت حساب TheHostingTool تاریخ : 2017/02/26
4,652اسکریپت ایجاد پلتفرم تبادل ترافیک Repro تاریخ : 2019/10/25
11,484اسکریپت انجمن ساز پیشرفته Osiris تاریخ : 2018/10/29
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت ها
قالب دخترونه و آرایش
قالب زیبای ماشین
قالب فانتزی و طنز چِشم
قالب دختر رویایی
قالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درخت
قالب دختر زیبا
قالب پسرونه غمگین
قالب عاشقانه قلب
شرکت سئو سایت
شرکت سئو سایت
تبلیغات
هاست دانلود
تبلیغات