مشاوره رایگان

دریافت لینک های دانلود دریافت پستی درب منزل مبلغ کل: تومان

جهت دریافت کد تخفیف به کانال تلگرام مراجعه و یا با پشتیبان آنلاین هماهنگ نمایید

نمایش نقشه های گوگل با Bootstrap

آیا در وب سایت خود یک قسمت برای تماس گرفتن دارید؟ اگر آدرس مکان خود را منتشر می کنید ، همیشه ایده خوبی است که برای بهبود تجربه کاربری و افزایش آگاهی از مکان یا آدرس شرکت خود ، یک نقشه نیز اضافه کنید.

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

کلید API نقشه گوگل

اخیراً ، Google تغییراتی در سیاست های API خود ایجاد کرده است ، بنابراین اگر می خواهید نقشه را در سایت خود استفاده کنید ، باید یک کلید Google API مخصوص سایت خود ، ایجاد کنید.

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

چون ممکن است مراحل دریافت کلید API توسط گوگل تغییر کند ، در این مقاله این مراحل را بررسی نمی کنم. برای راهنمایی به روز ایجاد کلید API ، از این صفحه بازدید کنید. در زمان نگارش این مقاله کل مراحل دریافت کلید API فقط یک یا دو دقیقه زمان شما را می گیرد.

اگر همه چیز آماده است؟ بیایید به الگوی اولیه HTML برویم.

الگوی HTML

مثل همیشه ، ما با الگوی اولیه HTML کار را شروع خواهیم کرد و سپس تغییرات لازم را روی آن اعمال می کنیم.

این الگوی اولیه ساده است:

در قسمت head صفحه ، ما شیوه نامه Bootstrap ، فونت Montserrat از فونت های گوگل و شیوه نامه custom.css را داریم. ما استایل های سفارشی خود را برای این نسخه ی نمایشی به فایل custom.css اضافه خواهیم کرد.
مقداری متن نمایشی هم صرفاً برای پر کردن صفحه اضافه کرده ام.
قسمت مهم وجود div با آیدی map است. این تگ ، نگهدارنده ای برای نقشه Google ما است.
قبل از برچسب بسته شدن تگ body ، اسکریپت های jQuery ، اسکریپت های بوت استرپ ، اسکریپت های نقشه های گوگل و فایل محلی custom.js اضافه شده است. ما نقشه های گوگل را در این فایل مقدار دهی می کنیم.
اگر از مرحله قبل کلید API نقشه گوگل خود را دارید ، آن را در کد منبع جایگزین کنید: key = YOUR_KEY
برای Bootstrap ، jQuery و فونت Awesome از نسخه های CDN آنها استفاده کردم که نیاز به اینترنت دارد پس اگر اسکریپت ها را بدون اتصال به اینترنت تست می کنید ، فراموش نکنید که نسخه های محلی آنها را نیز وارد کنید.

<!DOCTYPE html>
<html>
    <head>
        <title>Bootstrap & Google maps Tutorial</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
        <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
        <link href='custom.css' rel='stylesheet' type='text/css'>
    </head>
    <body>

        <div class="container">

            <div class="row">

                <div class="col-lg-8 col-lg-offset-2">

                    <h1>Clicksite <a href="mailto:clicksite.ir@gmail.com">clicksite.ir@gmail.com</a></h1>

                    <p class="lead">This is a demo for our tutorial showing you how to add a custom styled Google maps into a Bootstrap page.</p>

                    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

                    <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
                    
                </div>

            </div> 

        </div> 

        <div id="map"></div>

        <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu5nZKbeK-WHQ70oqOWo-_4VmwOwKP9YQ"></script>
        <script src="custom.js"></script>
    </body>
</html>

پس از کد html به جاوا اسکریپت می پردازیم.

جاوا اسکریپت - مقداردهی اولیه نقشه های گوگل

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

$(function () {

    function initMap() {

        var location = new google.maps.LatLng(50.0875726, 14.4189987);

        var mapCanvas = document.getElementById('map');
        var mapOptions = {
            center: location,
            zoom: 16,
            panControl: false,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(mapCanvas, mapOptions);

    }

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

توضیحات این کد را در زیر می بینید:

وقتی صفحه بارگیری می شود ، تابع initMap فراخوانی می شود - این کار توسط تابع addDomListener از نقشه گوگل انجام می شود.
در این تابع ، ما مکانی را که می خواهیم در مرکز نقشه قرار گیرد مشخص می کنیم - عدد اول عرض جغرافیایی و عدد دوم طول جغرافیایی است.
سپس عنصر mapCanvas را دریافت می کنیم. این همان تگ div با آیدی map از کد HTML بالا است.
برخی از گزینه های اولیه نقشه را نیز تعریف می کنیم (سطح بزرگنمایی ، نوع نقشه)
و ما شی جدید map از نقشه های گوگل را ایجاد می کنیم و پیکربندی خود را از طریق کد new google.maps.Map(mapCanvas, mapOptions) به آن منتقل می کنیم
و نقشه گوگل در صفحه ما نمایش داده می شود.

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

افزودن نشانگر با نماد سفارشی و پنجره اطلاعاتی که پس از کلیک نشان داده شود

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

این کار را به صورت زیر انجام خواهیم داد:

ابتدا ، مسیر فایل (filepath) را به نماد نشانگر خود در متغیر markerImage می دهیم.
سپس با فراخوانی new google.maps.Marker آن را به نقشه اضافه می کنیم. یک مکان ، یک شی map و مسیر نماد را به آن منتقل می کنیم.
سپس در متغیر contentString محتوای داخل پنجره ای را که می خواهیم بعد از کلیک کاربر روی نشانگر نشان داده شود ، تعریف می کنیم.
اکنون ما با فراخوانی new google.maps.InfoWindow شی infowindow را ایجاد می کنیم.
آخرین کاری که باید انجام دهیم این است که پنجره اطلاعات را به نشانگر پیوند دهیم و تابعی را اضافه کنیم که فقط پس از کلیک کاربر بر روی نشانگر ، پنجره را نشان دهد - marker.addListener.

$(function () {

    function initMap() {

        var location = new google.maps.LatLng(50.0875726, 14.4189987);

        var mapCanvas = document.getElementById('map');
        var mapOptions = {
            center: location,
            zoom: 16,
            panControl: false,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(mapCanvas, mapOptions);

        var markerImage = 'marker.png';

        var marker = new google.maps.Marker({
            position: location,
            map: map,
            icon: markerImage
        });

        var contentString = '<div class="info-window">' +
                '<h3>Info Window Content</h3>' +
                '<div class="info-content">' +
                '<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>' +
                '</div>' +
                '</div>';

        var infowindow = new google.maps.InfoWindow({
            content: contentString,
            maxWidth: 400
        });

        marker.addListener('click', function () {
            infowindow.open(map, marker);
        });


    }

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

در تصویر زیر می توانید نتیجه این مرحله را ببینید:

استایل دهی به نقشه گوگل

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

var styles = [
    {
        "featureType" : "landscape",
        "stylers" : 
        [
            { "saturation" : -100 },
            { "lightness" : 65 },
            { "visibility" : "on" }
        ]
    },
    {
        "featureType" : "poi",
        "stylers" :
            [
                { "saturation" : -100 },
                { "lightness" : 51 },
                { "visibility" : "simplified" }
            ]
    },
    {
        "featureType" : "road.highway",
        "stylers" :
            [
                { "saturation" : -100 },
                { "visibility" : "simplified" }
            ]
    },
    {
        "featureType" : "road.arterial",
        "stylers" :
            [
                { "saturation" : -100 },
                { "lightness" : 30 },
                { "visibility" : "on" }
            ]
    },
    {
        "featureType" : "road.local",
        "stylers" : 
        [
            { "saturation" : -100 },
            { "lightness" : 40 },
            { "visibility" : "on" }
        ]
    },
    {
        "featureType" : "transit",
        "stylers": 
        [
            { "saturation" : -100 },
            { "visibility" : "simplified" }
        ]
    },
    {
        "featureType" : "administrative.province",
        "stylers" :
            [
                { "visibility" : "off" }
            ]
    },
    {
        "featureType" : "water",
        "elementType" : "labels",
        "stylers" :
            [
                { "visibility" : "on" },
                { "lightness" : -25 },
                { "saturation" : -100 }
            ]
    },
    {
        "featureType" : "water",
        "elementType" : "geometry",
        "stylers" :
            [
                { "hue" : "#ffff00" },
                { "lightness" : -25 },
                { "saturation" : -97 }
            ]
    }
];

map.set('styles', styles);

یک منبع عالی برای استایل های نقشه های گوگل ، وب سایت Snazzy Maps است.

پکیج های آموزشی جدید

آموزش طراحی وب با ASP.NET Core MVC (تحت پروژه سایت اشتراک فیلم)

فصلِ: 5 , تعداد قسمت ها: 176 , سطح: صفر تا صد

موضوعات: آموزش ASP.NET آموزش ASP.NET MVC آموزش Bootstrap آموزش Ajax آموزش JQUERY

این فصل در یک نگاه:

در این فصل پس از بررسی سیستم مسیریابی و طراحی صفحه نمایش ویدیو ها، به سراغ پنل کاربری خواهیم رفت و مباحث Model Binding و…

توجه: این دوره آموزشی به صورت پیوسته بر اساس آخرین نسخه ی ASP.NET Core بروزرسانی خواهد شد. آموزش صفر تا صد طراحی سایت اشتراک ویدیو مشابه آپارات با استفاده از ASP.NET CORE MVC 3.0 و V…

دانلود و ادامه توضیحات

ساخت پروژه دیوار بصورت دو سکویی با ASP.NET Core و Xamarin

فصلِ: 5 , تعداد قسمت ها: 135 , سطح: صفر تا صد

موضوعات: آموزش ASP.NET آموزش HTML5 آموزش CSS آموزش JQUERY آموزش ASP.NET MVC آموزش Bootstrap

این فصل در یک نگاه:

…

توضیحات کلی مجموعه: در این مجموعه آموزشی، با استفاده از جدیدترین تکنولوژی ها و ابزار های مایکروسافت (دات نت)، به یک پروژه جذاب مدیریت آگهی مشابه دیوار می پردازیم. این آموزش در دو بخش کلی و…

دانلود و ادامه توضیحات

آموزش صفر تا صد بوت استرپ

فصلِ: 2 , تعداد قسمت ها: 13 , سطح: صفر تا صد

موضوعات: آموزش Bootstrap

این فصل در یک نگاه:

مباحث ریسپانسیو سازی شامل نقاط شکست مختلف - گرید سیستم - فلکس باکس - …

توجه : این دوره هیچ پیش نیازی ندارد و تمام مطالب از صفر آموزش داده شده است. از این رو شما برای شروع این دوره به هیچ مقدمه یا دوره دیگری نیاز ندارید. ویژگی های دوره آموزش بوت استرپ ۵ : - آم…

دانلود و ادامه توضیحات

دوره اموزش فریم ورک بوت استرپ

فصلِ: 6 , تعداد قسمت ها: 23 , سطح: صفر تا صد

موضوعات: آموزش Bootstrap

این فصل در یک نگاه:

فصل ششم: پروژهپروژه ا : ساخت یک قالب واکنشگرای گروه موسیقیپروژه 2 : ساخت قالب واکنشگرای سایت 5040…

سرفصل دوره آموزش فریم ورک بوت استرپ فصل اول : معرفی بوت استرپ طراحی واکنشگرا ( Responsive Design ) چیست ؟ با مفهوم طراحی واکنشگرا آشنا خواهید شد و تفاوت بین سایت واکنشگرا و سایت نسخه ی …

دانلود و ادامه توضیحات

آموزش طراحی وبسایت و اپلیکیشن اندروید ورزش3 (Varzesh3)

فصلِ: 4 , تعداد قسمت ها: 78 , سطح: متوسط

موضوعات: آموزش ASP.NET آموزش ASP.NET MVC آموزش JQUERY آموزش HTML5 آموزش Ajax آموزش Bootstrap آموزش JAVASCRIPT

این فصل در یک نگاه:

…

در این دوره آموزشی، وبسایت ورزش3 را با استفاده از ASP.NET Core پیاده سازی می کنیم و همچنین اپ اندروید آن را هم با Xamarin متصل به سرور سایت طراحی و در نهایت نحوه انتشار آن در مارکت هایی مثل …

دانلود و ادامه توضیحات

پکیج آموزش پروژه محور PHP ساخت سایت نیازمندی ها مشابه شیپور

فصلِ: 4 , تعداد قسمت ها: 240 , سطح: صفر تا صد

موضوعات: آموزش PHP آموزش Bootstrap آموزش CSS آموزش JQUERY آموزش HTML آموزش PHP MVC آموزش Ajax آموزش HTML5

این فصل در یک نگاه:

طراحی پنل مدیریت(دسته بندی)- دسته بندی یا category - نمایش دسته های فرعی در view با ورود به یکی از دسته های اصلی و آشن…

توضیحات کلی مجموعه: این مجموعه توسط فریمورک محبوب و دوست داشتنی bootstrap و به صورت تضمینی و صفر تا صد جهت یادگیری کارآموزان عزیز ارائه گردیده و دوستانی که این دوره را به طور کامل و دقیق…

دانلود و ادامه توضیحات

آموزش api نویسی

فصلِ: 5 , تعداد قسمت ها: 201 , سطح: صفر تا صد

موضوعات: آموزش HTML5 آموزش CSS آموزش JAVASCRIPT آموزش JQUERY آموزش PHP آموزش PHP MVC آموزش Ajax آموزش Bootstrap آموزش برنامه نویسی آندروید

این فصل در یک نگاه:

ایجاد پروژه آژانس مسافرتی.....…

فصل اول: آشنایی با مبانی برنامه نویسی اندروید آشنایی با معماری برنامه های اندرویدی ساخت شبیه ساز جهت تست پروژه اندروید آشنایی با دستور Toast و حلقه for در برنامه های اندروی…

دانلود و ادامه توضیحات

وبینار آموزش تکنیکهای ایمیل مارکتینگ | روشهای تبدیل بازدیدکننده به مشتری

فصلِ: 1 , تعداد قسمت ها: 2 , سطح: متوسط

موضوعات: آموزش HTML5 آموزش CSS آموزش JAVASCRIPT آموزش PHP آموزش Ajax آموزش Bootstrap آموزش Laravel آموزش PHP MVC آموزش ایمیل مارکتینگ آموزش وردپرس

این فصل در یک نگاه:

بهترین و پر بازده ترین روش تبدیل بازدیدکننده سایت به مشتری تبلیغات هدفمند و برند سازی هوشمندانه با ایمیل می باشد. ایمیل…

وبینار(سمینار آنلاین) آموزش تکنیک های ایمیل مارکتینگ اگر تا انتها این متن را مطالعه کنید نظر شما در مورد ایمیل مارکتینگ 180 درجه عوض می شود!! بر هیچکس پوشیده نیست که از سال 1972 که ای…

دانلود و ادامه توضیحات

آموزش تصویری لاراول - پروژه محور و کاربردی

فصلِ: 4 , تعداد قسمت ها: 368 , سطح: صفر تا صد

موضوعات: آموزش HTML5 آموزش CSS آموزش JAVASCRIPT آموزش PHP آموزش PHP MVC آموزش Ajax آموزش HTML آموزش ساخت فروشگاه اینترنتی آموزش Bootstrap آموزش Laravel

این فصل در یک نگاه:

مباحث تکمیلی فریم ورک لاراول…

فصل اول :آموزش مقدماتی فریم ورک لاراول معرفی فریم ورک لاراول و پیشنیازهای انجام کار انجام کانفیگ های اولیه برای نصب و راه اندازی فریم ورک معرفی روش های نصب پروژه لاراولی از طریق سایت گی…

دانلود و ادامه توضیحات

پکیج پروژه محور ساخت سایت مشابه آپارات با فریم ورک های react.js و laravel

فصلِ: 1 , تعداد قسمت ها: 155 , سطح: صفر تا صد

موضوعات: آموزش HTML5 آموزش CSS آموزش JAVASCRIPT آموزش JQUERY آموزش PHP آموزش PHP MVC آموزش Ajax آموزش HTML آموزش NodeJs آموزش Bootstrap آموزش Laravel آموزش Symphony

این فصل در یک نگاه:

مباحث مقدماتی فریم ورک react.js…

توضیحات کلی مجموعه: فصل اول : آشنایی با مباحث مقدماتی فریم ورک react.js نصب و راه اندازی node.js و کلیه پیش نیازهای لازم نصب فریم ورک react روی لوکال و انجام تست های لازم آغاز آشنایی …

دانلود و ادامه توضیحات

طراحی و برنامه نویسی وب

برنامه نویسی موبایل

برنامه نویسی ویندوز

سایر

نمایش نقشه های گوگل با Bootstrap