نمایش نقشه گوگل مپ در سایت با کد HTML
نمایش نقشه گوگل مپ در سایت با کد HTML
امروزه همه سایت های وردپرسی نیاز دارند تا یک نقشه گوگل مپ در سایت خود داشته باشند تا بتوانند به کاربران سایت خود در بخش تماس با ما یا بخش درباره ما و یا بخش خدمات ما آدرس فروشگاه یا دفتر سایت خود را به صورت نقشه در سایت خود نمایش دهند و اینکار در سایت و در گوگل مپ باعث شناسایی بیشتر کسب و کار آن ها می شود و می توانند با این روش آدرس دقیق دفتر شرکت خود را به راحتی نمایش دهند و این کار را بیشتر برای افرادی مناسب می باشد که سایت خود را تازه راه اندازی کرده اند و می خواهند که مشتری بیشتری برای خود داشته باشند و جذب کنند.
یکی از امکاناتی که گوگل در اختیار کاربران سایت خود قرار می دهند این است که می توانند خیلی راحت با گوگل مپ و کمی دانش کد نویسی HTML می توانند آدرس خود را به راحتی از طریق گوگل نمایش دهند و قرار دادن نقشه و آدرس دقیق سایت فروشگاه خود شما می توانید مشتری بیشتری برای فروشگاه خود جذب کنید ، این روز ها اکثریت افراد به کمک نقشه های ایرانی مانند نشان و بلد هم می توانند آدرس فروشگاه خود را در نقشه های به زبان فارسی نمایش دهند.
آموزش ویدیویی نمایش نقشه گوگل مپ در سایت :
نمایش نقشه گوگل مپ در سایت با دو روش :
همانطور که می دانید وردپرس یک سیستم مدیریت محتوا منبع باز است که به شما این امکان را می دهد که بتوانید به راحتی با دانش کمی کد نویسی در سایت خود هر امکانی را که می خواهید اضافه کنید و همانگونه که اطلاع دارید وردپرس دارای افزونه های زیادی می باشد که شما با نصب کردن آن افزونه ها در سایت خود می توانید امکاناتی را که می خواهید در سایت خود فراهم کنید و آن امکانات را به سایت خود اضافه کنید
ما این بار به شما می خواهیم آموزش دهیم که با دانش کمی کد نویسی html نقشه گوگل را در سایت خود در هر بخشی که می خواهید حالا یا در صفحه اصلی یا در بخش خدمات ما یا در بخش تماس با ما در سایت خود نمایش دهید و با قرار دادن نقشه آدرس فروشگاه یا دفتر سایت شما مشتریان شما با آرامش بیشتری از سایت شما محصولات شما را خریداری می کند.
کد نقشه HTML گوگل برای سایت :
برای اینکه شما بتوانید نقشه موقعیت مکانی خود را در سایت نمایش دهید باید اول از همه وارد صفحه گوگل مپ با آدرس map.google.com شوید و با رفتن به این مکان آدرس اینترنتی شما به یک صفحه نقشه وارد می شوید که در آن شما باید از روی آن صفحه مکان مورد نظر خود را پیدا کنید و بر روی آن راست کلیک کنید
در این قسمت برای شما یک پنجره جدید باز خواهد شد که باید بر روی گزینه Whats Here کلیک کنید ، مانند تصویر بالا.
بعد از اینکه بر روی دکمه Whats Here کلیک کردید یک مختصات نقشه مانند تصویر بالا برای شما نمایش می دهد که شما باید بر روی آن کلیک کنید و آن مختصات داده شده را کپی کنید این مختصات اعدادی چون 29.935916.52.887380 می باشد که به شما تحویل داده شده است و شما باید بر روی این مختصات کلیک کنید و مختصات را کپی کنید.
بعد از اینکه شما مختصات مورد نظر موقعیت مکانی خود را پیدا کردید باید کد زیر را در قسمتی که می خواهید نقشه سایت شما نمایش داده شود قرار دهید :
<!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.935916.52.887380);
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.935916.52.887380 قرار دهید تا نقشه و مختصات موقعیت به شما نمایش داده شود و همچنین در کد بالا به جای Takhte Jamshid را به کلمه یا نقطه مکانی خود در نظر گرفته اید تغییر دهید و از آن در نمایش آدرس محل کار خود در سایت استفاده کنید.
به همین راحتی شما می توانید ، آدرس فروشگاه خود را نمایش دهید
موفق و سربلند باشید.
