نمایش نقشه گوگل با جی کوئری و جاوا اسکریپت + پروژه
نمایش نقشه گوگل یک محل به کمک جی کوئری مانند تصویر زیر
![نقشه گوگل,نمایش نقشه گوگل,نمایش نقشه گوگل در سایت,نقشه گوگل برای سایت,google map,گوگل,کد نمایش نقشه گوگل در سایت,سورس نقشه گوگل برای سایت,دانلود سورس نمایش نقشه گوگل در سایت](/Images/upload/HyperMapShow.JPG)
برای این کار باید مراجع مربوط به نقشه گوگل را در صفحه وب خود اضافه کنید که شامل موارد زیر می باشد
<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/
فایل پروژه فعلا در دسترس نیست و بزودی در سایت بارگذاری میشود برای نمایش کد های این پروژه اینجا کلیک کنید و نمونه رو ذخیره و با نوت پد اجرا کنید
برای این کار باید مراجع مربوط به نقشه گوگل را در صفحه وب خود اضافه کنید که شامل موارد زیر می باشد
<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/
فایل پروژه فعلا در دسترس نیست و بزودی در سایت بارگذاری میشود برای نمایش کد های این پروژه اینجا کلیک کنید و نمونه رو ذخیره و با نوت پد اجرا کنید