- میهن وب هاست چطوره + کد تخفیف
- معرفی ۳ هاست پیشتاز وردپرس ایران
- هاست میزبان فا چطوره؟ + کد تخفیف
- عکس مارکت - خرید تصاویر شاتراستوک ، فروش عکس ، طرح وکتور ، موکاپ ، پوستر دیواری ، طرح های دکوراتیو
- فقط گیککی ها بخوانند
- نظر شما در مورد وی لرن در یک جمله!
- دوره های آموزشی درخواستی شما
- مشکل خطای 99% در دانلود برای برخی کاربران
- تغییر پسوند فایل در ویندوز 10
- مقایسه شرکت های هاستینگ ایران
آخرین مطالب
امکانات وب
نقشه گوگل یکی از امکانات پرطرفدار گوگل می باشد که کاربران بسیار زیادی از آن استفاده می کنند . وبمستران نیز دور از این کاربران نیستند و از آن به بهترین نحو استفاده می کنند . برخی از وبمستران اقدام به نمایش نقشه های گوگل در سایت خود می باشند که توسط آن محل کار ، همایش و … را به طور دقیق به کاربران خود نمایش دهند . برای نمایش نقشه های گوگل در سایت های وردپرس افزونه وجود دارد اما ما استفاده از کد را به شما پیشنهاد می دهیم ؛ زیرا افزونه ها فشار بسیار زیادی به سرور سایت شما خواهند آورد و منابع زیادی مصرف می کنند . در این مطلب قصد داریم آموزش استفاده از نقشه گوگل در سایت وردپرس و غیر وردپرس خود ( حتی سایت های استاتیک ! ) را ارائه کنیم . در ادامه با ما و آموزش نمایش نقشه گوگل با استفاده از کد همراه باشید .
آموزش استفاده از نقشه گوگل در سایت
برای اینکار ابتدا وارد نام کاربری خود در گوگل مپ ( Google map ) شوید . در صورتی که در سرویس دهنده های گوگل ثبت نام نکرده اید ، می توانید ثبت نام کنید . سپس مکان مورد نظر خود را پیدا کرده و بر روی آن کلیک راست نمایید تا گزینه های آن ظاهر شود . با استفاده از گزینه ی What’s here می توانید مختصات مکان مورد نظر خود را بیابید که با رنگ آبی و به صورت عددی نمایش داده می شود . مختصات بدست آمده را در بخشی ذخیره کنید و در ادامه به کاربرد آن خواهیم پرداخت .
با استفاده از کد زیر در هر بخشی از سایت تود می توانید نقشه گوگل را نمایش دهید .
<!DOCTYPE HTML>
<html lang="en">
<head> <meta charset="UTF-8" /> <title>Google Maps</title> <style type="text/css"> #map-canvas{ width: 700px; height: 500px; margin: 0 auto; } </style> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> <script type="text/javascript"> function initialize() { var myLatlng = new google.maps.LatLng(29.935711, 52.887702); var mapOptions = { zoom: 15, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); var contentString = '<div style="direction: rtl; text-align: right;font-family: Tahoma;">' + '<h4>Marvdasht , Takhte Jamshid</h4>' + '<h5>Takhte Jamshid</h5>' + '</div>'; var infowindow = new google.maps.InfoWindow({ content: contentString }); var marker = new google.maps.Marker({ position: myLatlng, map: map, title: 'Takhte Jamshid' }); infowindow.open(map, marker); google.maps.event.addListener(marker, 'click', function() { infowindow.open(map, marker); }); } </script>
</head>
<body onload="initialize()"> <div id="map-canvas"></div>
</body>
</html>اکنون مختصاتی که در مرحله قبل بدست آوردید را جایگزین مختصات ۲۹.۹۳۵۷۱۱, ۵۲.۸۸۷۷۰۲ موجود در کد های بالا نمایید . برای یافتن مختصات در بین کد ها می توانید با استفاده از کلید های ctrl+F یا F3 استفاده کنید . همچنین به جای کلمه ی Doctor wordpress نام یا آدرس محل مورد نظر خود را وارد نمایید . اکنون نقشه ی گوگل در هر بخشی که این کد را قرار داده اید ، قابل مشاهده است .
لطفا چند ثانیه زمان بگذارید ! اگر این مطلب مورد استفاده شما بود لطفا امتیاز خودتان را از 5 به ما بدید . با تشکر فراوان
Loading...
html - طراحی...Loading...ما را در سایت html - طراحی دنبال می کنید
برچسب : نویسنده : استخدام کار html بازدید : 137