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

دریافت API Key

در ابتدای کار باید یک API Key از گوگل دریافت کنید. بدین منظور به لینک زیر بروید و روی دکمه GET A KEY  کلیک کنید

https://developers.google.com/maps/documentation/javascript/get-api-key#get-an-api-key

استفاده از نقشه

برای استفاده باید از کد زیر را در قسمت head صفحه مورد نظر گذاشته و در قسمتی که مشخص شده از API Key خودتون استفاده کنید

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=API_KEY &amp;language=fa"></script>

سپس اِلِمانی که میخواهیم به نقشه تبدیل شود را قرار داده و با استایل ابعاد آن را مشخص میکنیم

<div id="googleMap" style="width: 100%; height: 500px;"></div>

و در نهایت با استفاده از اسکریپت زیر، از نقشه ایجاد شده لذت میبریم

<script>

        var _Lat = 35.8389475;

        var _Lng = 51.015788;

        var _Lodation = new google.maps.LatLng(_Lat, _Lng);

        function initialize() {

            var mapProp = {

                center: _Lodation,

                zoom: 15,

                panControl: true,

                zoomControl: true,

                mapTypeControl: true,

                scaleControl: true,

                streetViewControl: false,

                overviewMapControl: true,

                rotateControl: true,

                mapTypeId: google.maps.MapTypeId.ROADMAP

            };

            var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

            var marker = new google.maps.Marker({

                animation: google.maps.Animation.DROP,

                position: _Lodation,

                map: map,

            });

        }

        google.maps.event.addDomListener(window, 'load', initialize);

    </script>