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

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

در ابتدا تگ های مورد که شامل یک دکمه  و دو 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>