تا %60 تخفیف خرید برای 8 نفر با صدور مدرک فقط تا
00 00 00
در توسینسو تدریس کنید

آموزش استفاده از گوگل مپ (Google Map) در وب سایت

نمایش اطلاعات تماس در وب سایتی که قصد طراحی آن را دارید امری ضروری است. حال این اطلاعات تماس می تواند یک آدرس و شماره ساده باشد یا اطلاعات دقیق تری را ارائه نماید. بوسیله سرویس Google Map می توانید آدرس مورد نظر خود را بر روی نقشه گوگل در صفحات وب سایت خود نمایش دهید. برای اینکار ابتدا یک صفحه ساده به صورت زیر ایجاد کنید:




	Google Map Sample
	


	

در کد بالا یک div با شناسه map-container تعریف کردیم که قصد داریم نقشه را در آن نمایش دهیم. در قدم بعدی می بایست سرویس نقشه گوگل را به صفحه خود اضافه کنیم. برای اینکار کد javascript زیر را باید به صفحه اضافه کنیم:

<script> 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(latitude , longitude);
        var mapOptions = {
            zoom: 16,
            scrollwheel: false,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(document.getElementById('map-container'), mapOptions);

        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: 'title'
        });
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>

در کد بالا در قسمت latitude و longitude باید آدرس موقعیت مورد نظر را برای نمایش وارد کنید و همینطور در بخش title عنوان مورد نظر را وارد کنید. برای بدست آوردن مختصات بر روی نقشه کافیست وارد آدرس maps.google.com شده، بر روی نقطه مورد نظر کلیک کنید تا موقعیت جغرافیایی برای شما نمایش داده شود. کد صفحه HTML را به صورت زیر تغییر می دهیم:




	Google Map Sample
	


<script> 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.8534774, 50.9550267); var mapOptions = { zoom: 16, scrollwheel: false, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById('map-container'), mapOptions); var marker = new google.maps.Marker({ position: myLatlng, map: map, title: 'برج میلاد' }); } google.maps.event.addDomListener(window, 'load', initialize); </script>

با انجام تغییرات بالا، موقعیت مورد نظر بر روی صفحه نمایش داده می شود. امیدوارم که این نکته مورد استفاده شما قرار بگیرد.

نویسنده: حسین احمدی

انجمن تخصصی فناوری اطلاعات ایران

#سرویس_نقشه_گوگل #نکات_طراحی_وب #نمایش_نقشه_گوگل_در_صفحات
نظر شما
برای ارسال نظر باید وارد شوید.
4 نظر
افرادی که این مطلب را خواندند مطالب زیر را هم خوانده اند