نمایش نقشه گوگل با استفاده از JQuery Dialog Modal PopUp

در این مقاله نحوه نمایش نقشه گوگل با کلیک بر روی دکمه را توضیح خواهیم داد

نمایش نقشه گوگل با استفاده از JQuery Dialog Modal PopUp

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

در ابتدا تگ های مورد که شامل یک دکمه  و دو Div میباشد را به صفحه قرار میدهیم .سپس لینک فایل های JavaScript و JQuery و CSS مخصوص گوگل را در قسمت header صفحه اضافه می کنیم .

زمانی که کاربر بر روی دکمه "نمایش نقشه" کلیک کرد , نقشه گوگل به صورت خودکار نمایش داده شود .

 <h3>
            <a href="http://barnamenevisan.org/">برنامه نویسان</a>
        </h3>
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
        <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css"
              rel="stylesheet" type="text/css" />
        <script type="text/javascript">
            $(function () {
                $("#btnShow").click(function () {
                    $("#dialog").dialog({
                        modal: true,
                        title: "Google Map",
                        width: 600,
                        hright: 450,
                        buttons: {
                            Close: function () {
                                $(this).dialog('close');
                            }
                        },
                        open: function () {
                            var mapOptions = {
                                center: new google.maps.LatLng(19.0606917, 72.83624970000005),
                                zoom: 18,
                                mapTypeId: google.maps.MapTypeId.ROADMAP
                            }
                            var map = new google.maps.Map($("#dvMap")[0], mapOptions);
                        }
                    });
                });
            });
        </script>
        <input id="btnShow" type="button" value="نمایش نقشه " />
        <div id="dialog" style="display: none">
            <div id="dvMap" style="height: 380px; width: 580px;">
            </div>
        </div>

 

فایل های ضمیمه