خرید هاست ارزدیجیتال
حراجی دامنه های ویژهمشاهده





تبلیغات
تبلیغات تبلیغات
تبلیغات ژاکت, مرجع خرید قالب و افزونه وردپرسی اورجینال

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

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

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

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

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

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

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

دانلود

هاست ارزان، لایت اسپید، سرور مجازی منطبق با اسکریپت های 20script کلیک کنید >

خرید ارز
مطلب مفیدی بود ؟
نویسنده : تیم محتوای 20اسکریپت 6 CSS , HTML5 , آموزش ها , اسکریپت ها , مقالات,آموزش,ترفند
لینک کوتاه مطلب : https://www.20script.ir/?p=13340
کلمات کلیدی پست :
مطالب مرتبط
37,514دانلود مجموعه بزرگ افزونه‌های سایت Yithemes بروزرسانی مرداد 97 (August 2018) تاریخ : 2018/08/7
5,884اسکریپت مجله خبری Maan News تاریخ : 2023/08/14
11,877اسکریپت شرح و تفسیر زنده نتایج بازی فوتبال LMCS نسخه 1.6.0 تاریخ : 2015/10/19
30,396افزونه ویدئو پلیر وردپرس با قابلیت نمایش چندین کیفیت تاریخ : 2016/07/5
13,344افزونه وردپرس نمایش دموی قالب ها و اسکریپت ها FBar نسخه 1.4 تاریخ : 2015/11/2
10,223افزونه ایجاد کتاب های سه بعدی برای وردپرس تاریخ : 2014/07/16
26,897اسکریپت قرار دادن تگ در Mp3 با Mp3 Tag Editor تاریخ : 2014/05/31
10,566پوسته وردپرس ارائه خدمات سئو Seo Wave نسخه 1.2 تاریخ : 2017/12/4
18,648اسکریپت خبرخوان اتوماتیک RSS Auto Pilot نسخه 2.5 تاریخ : 2016/05/30
14,770راه اندازی سایت نیازمندی ها با اسکریپت Infinity Market تاریخ : 2017/09/5
14,127افزونه رایگان خبرنامه ایمیلی برای Virtual Freer تاریخ : 2014/08/3
17,688اسکریپت راه اندازی وب‌سایت آموزش آنلاین Academy تاریخ : 2020/06/25
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت هاقالب عشق بین انگشت ها
قالب دخترونه و آرایشقالب دخترونه و آرایش
قالب زیبای ماشینقالب زیبای ماشین
قالب فانتزی و طنز چِشمقالب فانتزی و طنز چِشم
قالب دختر رویاییقالب دختر رویایی
قالب وبلاگ دکوراسیونقالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درختقالب وبلاگ کلبه و درخت
قالب دختر زیباقالب دختر زیبا
قالب پسرونه غمگینقالب پسرونه غمگین
قالب عاشقانه قلبقالب عاشقانه قلب
بیست اسکریپت
اسکریپت
profile
sourceforge
profile webmaster
profile check
checker list
checker
checker
upload file