آموزش نمایش نقشه گوگل در سایت
نقشه گوگل یکی از امکانات پرطرفدار گوگل می باشد که کاربران بسیار زیادی از آن استفاده می کنند . وبمستران نیز دور از این کاربران نیستند و از آن به بهترین نحو استفاده می کنند . برخی از وبمستران اقدام به نمایش نقشه های گوگل در سایت خود می باشند که توسط آن محل کار ، همایش و … را به طور دقیق به کاربران خود نمایش دهند . برای نمایش نقشه های گوگل در سایت های وردپرس افزونه وجود دارد اما ما استفاده از کد را به شما پیشنهاد می دهیم ؛ زیرا افزونه ها فشار بسیار زیادی به سرور سایت شما خواهند آورد و منابع زیادی مصرف می کنند . در این مطلب قصد داریم آموزش استفاده از نقشه گوگل در سایت وردپرس و غیر وردپرس خود ( حتی سایت های استاتیک ! ) را ارائه کنیم . در ادامه با ما و آموزش نمایش نقشه گوگل با استفاده از کد همراه باشید .
آموزش استفاده از نقشه گوگل در سایت
برای اینکار ابتدا وارد نام کاربری خود در گوگل مپ ( 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>
اکنون مختصاتی که در مرحله قبل بدست آوردید را جایگزین مختصات 29.935711, 52.887702 موجود در کد های بالا نمایید . برای یافتن مختصات در بین کد ها می توانید با استفاده از کلید های ctrl+F یا F3 استفاده کنید . همچنین به جای کلمه ی Doctor wordpress نام یا آدرس محل مورد نظر خود را وارد نمایید . اکنون نقشه ی گوگل در هر بخشی که این کد را قرار داده اید ، قابل مشاهده است .
