آموزش نمایش نقشه گوگل در سایت

آموزش ها, وردپرس

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

آموزش نمایش نقشه گوگل در سایت

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

روی مکان مورد نظر راست کلیک کرده و 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(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>

<!DOCTYPE HTML>

<head>

<title>Google Maps</title>

#map-canvas{

width: 700px;

height: 500px;

margin: 0 auto;

}

</style>

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>

</html>

خب حالا مختصات رو توی کد های بالا جای ۲۹٫۹۳۵۷۱۱, ۵۲٫۸۸۷۷۰۲ قرار بدید تا نقشه رو با مختصات شما نشون بده. کلمه Takhte Jamshid رو هم به کلمه مورد نظر خودتون تغییر بدید و از نمایش آدرس محل کار خودتون روی وبسایتتون لذت ببرید.

آخرین بروزرسانی مطلب : ۱۹ مرداد ۱۳۹۸
منبع مطلب : فری اسکریپت

برچسب ها : سایت, گوگل, نقشه گوگل, نقشه گوگل در سایت, نمایش نقشه گوگل در سایت, وردپرس

178 بازدید

محمد

۱۹ مرداد ۱۳۹۸

جدیدترین نسخه سی ام اس ها

وردپرس فارسی نسخه 4/4/2
تاریخ انتشار : ۱۹ مرداد ۱۳۹۸

جوملا فارسی نسخه 3/4/8
تاریخ انتشار : ۱۹ مرداد ۱۳۹۸

پرستاشاپ فارسی نسخه 1/6/1/2
تاریخ انتشار : ۱۹ مرداد ۱۳۹۸

دروپال فارسی نسخه 7/41
تاریخ انتشار : ۱۹ مرداد ۱۳۹۸

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

افکت های سی اس اس

افکت های جیکوئری

مرجع وردپرس

مرجع اسکریپت

آموزش نمایش نقشه گوگل در سایت

آموزش نمایش نقشه گوگل در سایت

جدیدترین نسخه سی ام اس ها

پیوندها

برچسب‌ها

دسته بندی مطالب

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

افکت های سی اس اس

افکت های جیکوئری

مرجع وردپرس

مرجع اسکریپت

آموزش نمایش نقشه گوگل در سایت

آموزش نمایش نقشه گوگل در سایت

مطالب پیشنهادی

جدیدترین نسخه سی ام اس ها

پیوندها

برچسب‌ها

دسته بندی مطالب