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

اگر می خواهید نقشه گوگل را در سایت تان نمایش دهید روش های زیادی برای انجام آن وجود دارد ، بسیاری از قالب های وردپرسی می توانند نقشه گوگل را نمایش دهند و فقط کافیست طول و عرض جغرافیایی را به آن بدهید ، افزونه هایی هم برای انجام این کار وجود دارد. اما بهترین راه استفاده از کد است که می توانید به راحتی نقشه تان را در هر جایی از سایت که خواستید لود کنید. قدم به قدم این آموزش را دنبال کنید.

 

وارد سایت maps.google.com شوید.

 

روی محلی که قصد دارید در سایت تان نمایش دهید کلیک راست کنید و whats here را بزنید.

بعد از کلیک روی whats 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(35.779244, 51.354126);
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>farahzadi</h4>’ +
‘<h5>farahzadi</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>

 

حالا باید به جای مختصات 35.779244, 51.354126 ، مختصات خودتان را درج کنید و به جای عبارت farahzadi هم نام مکان مورد نظرتان را تایپ کنید.

نقشه شما آماده است تا در سایت به نمایش گذاشته شود.

 

امتیاز شما به این صفحه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *