نمایش نقشه گوگل در پنجره های جی کوئری

در این پست می خواهیم در ساده ترین حالت ممکن از API های مربوط به Google Map و کتابخانه jQuery برای نمایش نقشه استفاده کنیم.


چون می خواهیم از jQuery و Google Map استفاده کنیم به کتابخانه های مربوط به آنها نیاز داریم. در چند خط زیر این کتابخانه ها را به کد خود اضافه می کنیم:

<br /> <link href="http://ajax.googleapis.com/ajax/libs /jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/><br /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"> </script><br /> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"> </script><br /> <script src="http://maps.gstatic.com/intl/en_ALL/mapfiles/285c/maps2.api/main.js" type="text/javascript"></script><br /> <script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAy6MBiqsAuMYcRcIXE-SdkhQI513BVj7Itr7WPMGFabbrMAySrRTqrYgzCD2NDBq2Npe_EDAW--Is2A" type="text/javascript"></script><br />

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

<br /> <style type="text/css"> <br /> v\:* <br /> {<br /> behavior:url(#default#VML);} <br /> html, body {width: 100%; height: 100%} <br /> body {margin-top: 0px; margin-right: 0px; margin-left: 0px; margin-bottom: 0px<br /> }<br /> </style><br />

کار اصلی در این بخش انجام میشود. با کمک یک event مربوط به jQuery که هنگام لود شدن کامل صفحه صدا زده میشود، تابع initialize را صدا می زنیم. این تابع ابتدا یک پنجره jQuery را نمایش میدهد و چند خط بعد پس از بررسی سازگاری مرورگر برای نمایش نقشه، همان دیالوگ به عنوان کانتینر نقشه انتخاب میشود. سپس با تنظیم عرض و طول جغرافیایی و میزان زوم، نمای نقشه را به قسمتی از کره زمین که بخواهیم منتقل می کنیم.:

<br /> <script> <br /> function initialize() <br /> <br /> { <br /> $("#dialog").dialog(); <br /> var map; <br /> if (GBrowserIsCompatible()) { <br /> map = new GMap(document.getElementById("dialog")); <br /> map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4); <br /> } <br /> <br /> $(document).ready(function() <br /> { <br /> initialize(); <br /> });<br /> </script><br />

این هم همان تگی ایست که jQuery برای نمایش محتویات dialog مورد نظر ما از آن استفاده می کند:

<br /> <div id="dialog" title="Dialog Title"> </div>

این هم کل کد:

WikiUpload Free File Hosting