نمایش نقشه گوگل با جی کوئری و جاوا اسکریپت + پروژه

نمایش نقشه گوگل یک محل به کمک جی کوئری مانند تصویر زیر



برای این کار باید مراجع مربوط به نقشه گوگل را در صفحه وب خود اضافه کنید که شامل موارد زیر می باشد

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
همچنین ما برای نمایش نقشه در یک باکس نمایشی از Jquery-Ui هم استفاده خواهیم کرد

سپس توسط توابعی که برای نمایش نقشه توسط موقعیت جغرافیایی در این کتابخانه (که در بالا به پروژه اضافه کرده ایم ) ، نقشه محل را نمایش می دهیم

نمای کلی :

<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 () {
               $("#ShowMap").click(function () {
                   $("#dialog").dialog({
                       modal: true,
                       title: "www.HyperSourCe.ir",
                       width: 600,
                       hright: 450,
                       buttons: {
                           Close: function () {
                               $(this).dialog('close');
                           }
                       },
                       open: function () {
                           var mapOptions = {
                               center: new google.maps.LatLng(38.08,46.2919444),
                               zoom: 15,
                               mapTypeId: google.maps.MapTypeId.ROADMAP
                           }
                           var map = new google.maps.Map($("#HsMapDiv")[0], mapOptions);
                       }
                   });
               });
           });
       </script>
       <div style="width:1024px;height:600px;">
       <input id="ShowMap" type="button" value="نمایش نقشه " />
       <div id="dialog" style="display: none">
           <div id="HsMapDiv" style="height: 380px; width: 580px;">
           </div>
       </div>
       </div>
 
برای مشاهده نمونه اینجا کلیک کنید

نکته :  برای بدست اوردن مختصات یک شهر میتوانید دز گوگل جستجو کنید برای مثال برای بدست  اوردن مختصات شهر تبریز من از ادرس زیر استفاده کردم
http://www.maplandia.com/iran/east-azarbayejan/tabriz/


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

risperdal avis warpedfish.co.uk risperdal avis