استفاده از نقشه گوگل (Google maps) در صفحات وب

برنامه ساده Hello World برای نشان دادن نحوه استفاده از نقشه گوگل در یک صفحه وب، از طریق نسخه 3 از API جاوا اسکریپت نقشه های گوگل (Google Maps Javascript API v3).

در این مقاله، به شما نشان خواهیم داد چگونه نقشه ای را با نقطه مرکزی “تهران، ایران” نمایش داده و از یک “نشانگر (marker)” برای شناسایی مکان بر روی نقشه استفاده کنید.

مثال کامل …

<html>

<head>

<title>Google Map Hello World Example</title>

div#map_container{

width:100%;

height:350px;

}

</style>

src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

function loadMap() {

var latlng = new google.maps.LatLng(35.746512, 51.416016);

var myOptions = {

zoom: 4,

center: latlng,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

var map = new google.maps.Map(document.getElementById("map_container"),myOptions);

var marker = new google.maps.Marker({

position: latlng,

map: map,

title:"my hometown, Tehran, Iran!"

});

}

</script>

</head>

</body>

</html>

توضیحات زیر را ببیینید.

1- نقشه گوگل را در کجای صفحه وب نشان دهیم؟

در این مثال نقشه گوگل در المانی با شناسه “map_container” نمایش داده می شود، که می تواند هر اسم دیگری داشته باشد.

//...

div#map_container{

width:600px;

height:500px;

}

</style>

//...

2- بارگذاری API نقشه گوگل

برای استفاده از API نقشه های گوگل، شما فقط نیاز به قراردادن جاوا اسکریپت زیر در صفحه وب خود دارید:

src="http://maps.googleapis.com/maps/api/js?sensor=false">

</script>

نکته: سنسور (به طور معمول، سنسور تلفن همراه) برای تعیین محل کاربر استفاده می شود.

3- طول و عرض جغرافیایی

هر مکان بر روی زمین را با طول و عرض جغرافیایی و یا به اصطلاح “مختصات جغرافیایی” می توان نشان داد.

نکته: فعلا، چندان اهمیتی ندارد که بدانید طول و عرض جغرافیایی چه هستند و چگونه کار می کنند. برای سادگی بیشتر می توانید فرض کنید که طول جغرافیایی مختصات در محور X و عرض جغرافیایی مختصات در محور Y است.

در این مثال، شما می توانید طول و عرض جغرافیایی نطقه دلخواه خود را از طریق وب سایت یافتن طول و عرض جغرافیایی را پیدا کنید. سپس، طول و عرض جغرافیایی خود را به فرمت زیر در کد قرار دهید:

var latlng = new google.maps.LatLng(Latitude, Longitude)

function loadMap() {

var latlng = new google.maps.LatLng(35.746512, 51.416016);

//...

}

</script>

ژئوکدینک فرآیند تبدیل آدرس به “طول و عرض جغرافیایی” به عنوان ژئوکدینک شناخته شده است.

4- پیکربندی تنظیمات گوگل نقشه

مقادیر تنظیمی به خودی خود گویا هستند.

function loadMap() {

//...

var myOptions = {

zoom: 4,

center: latlng,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

//...

}

</script>

نمایش نقشه های گوگل در المان HTML با شناسه “map_container”:

function loadMap() {

//...

var map = new google.maps.Map(document.getElementById("map_container"),myOptions);

//...

}

</script>

یک نشانگر (marker) ایجاد کرده و موقعیت آن را صفحه نمایش و جعبه پیام از پیش تعریف شده که در زمان قرارگرفتن ماوس بر روی آن نمایش می یابد را تنظیم کنید.

function loadMap() {

//...

var marker = new google.maps.Marker({

position: latlng,

map: map,

title:"my hometown, Tehran, Iran!"

});

//...

}

</script>

5- بارگذاری نقشه های گوگل

مرحله آخر، فقط تابع را از طریق رویداد onload بدنه صفحه بارگذاری کنید.

1	<body onload="loadMap()">

6- نتیجه:

3 نظر

محمود غریبی
آبان ۲۴, ۱۳۹۲ در ۲:۱۲ ق.ظ

دوستان بخدا این کارها خیلی سادست ، مثلا من نمونه ای رو براتون ذکر میکنم ، شما تنها کافیه طول و عرض جغرافیای مورد نظرتون رو داشته باشین ، نمونه ای که من میزارم یک صفحه ی کامل هست ، ابتدا در Notepad ذخیره کنید و بعدش با فرمت html ذخیره کنید. نگاهی به سورس بنذازین متوجه خواهید شد که کجاها رو باید دست بزنید. :

The Google Map

$(function() {
$(“#map”).gMap({ markers: [{ latitude: 36.639469,
longitude: 52.905788,
html: ” من اینجا هستم ! “,
}],
zoom: 15 });
});

پاسخ
سعید تهرانی
آذر ۳۰, ۱۳۹۴ در ۱۱:۵۹ ق.ظ

سلام اولا ممنون که زحمت کشیدید و این سایتو راه اندازی کردید.
ولی این همه نوشته های روی هم که جز باعث سردرگمی خواننده میشود چه مفهومی دارد؟!
اگر ممکن است یک مثال عملیاتی که بتوانیم هم آموزش ببینیم و هم کاربردی باشد بسیار مفید تر خواهد بود.
خدا قوت شما را افزایش دهد

پاسخ
1. ادمین
  آذر ۳۰, ۱۳۹۴ در ۹:۰۷ ب.ظ
  
  با تشکر از شما
  به هم ریختگی در نمایش کدها به علت تغییرات در سیستم سایت رخ داده بود که با تذکر شما اصلاح شد.
  موفق باشید
  
  پاسخ

سایت تخصصی جی.آی.اس

آموزش و گسترش سیستم های اطلاعات مکانی

استفاده از نقشه گوگل (Google maps) در صفحات وب