65
تشکر

آموزش استفاده از Google Map برای ارائه نقشه در سایت ها

آموزش استفاده از Google Map

آموزش استفاده از Google Map

نیازی به گفتن نیست که امروزه اکثر کسانی که با اینترنت آشنا هستند با سرویس Google maps نیز آشنا هستند و از آن استفاده میکنند. بعضی از وبسایتها برای نمایش محل کار شرکت, سازمان و یا خانه خودشان از سرویس Google map استفاده میکنند و محل مورد نظر را در نقشه مارک (mark) میکنند و در سایتشان قرار میدهند.

در ادامه با آموزش اینکار همراه ما باشید…

ما میخواهیم آنچه را که در تصویر مطلب مشاهده میکنید را درست کنیم و در سایت قرار دهیم.

ابتدا باید مختصات محلی را که قرار است نمایش دهیم را بدست بیاوریم. به این مختصات در google map LatLng گفته میشود. برای بدست آوردن این مختصات به این سایت مراجعه کنید.

آموزش استفاده از Google Map

آموزش استفاده از Google Map

پس از بدست آوردن مختصات یک صفحه html ایجاد کرده و کدهای زیر را درون آن قرار دهید (از این فایل میتوانید به عنوان یک تمپلیت استفاده کنید).

<!DOCTYPE HTML>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Google Maps</title>
	<style type="text/css">
	  #map-canvas{
	    width: 700px;
	    height: 500px;
	    margin: 0 auto;
	  }
	</style>
	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
	<script type="text/javascript">
	   function initialize() {
	     var myLatlng = new google.maps.LatLng(36.28695466492734, 59.615657329559326);
	     var mapOptions = {
	       zoom: 15,
	       center: myLatlng,
	       mapTypeId: google.maps.MapTypeId.ROADMAP
	     }
	     
	     var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
	     
	     var contentString = '<div style="direction: rtl; text-align: right;font-family: Tahoma;">' +
	                                 '<h4>حرم امام رضا علیه السلام</h4>' +
	                                  '<h5>آپارنت</h5>' +
	                                  '</div>';
	     
	     var infowindow = new google.maps.InfoWindow({
	       content: contentString
	     });
	     
	     var marker = new google.maps.Marker({
	       position: myLatlng,
	       map: map,
	       title: 'Imam Reza'
	     });
	     
	     infowindow.open(map, marker);
	     google.maps.event.addListener(marker, 'click', function() {
	       infowindow.open(map, marker);
	     });
	   }
	</script>
</head>
<body onload="initialize()">
	<div id="map-canvas"></div>
</body>
</html>

نحوه استفاده: در خط شانزدهم مختصات خودتان را جایگزین این مختصات کنید.

در خط هجدهم میتوانید مقدار zoom را مشخص کنید.

در خط بیست و پنجم کد htmlیی که قرار است در Box سفید نمایش داده شود را باید قرار دهید.

در خط سی و هفتم عنوان محل مورد نظر را میتوانید قرار دهید.

به همین سادگی توانستیم یک محل را در Google map مارک کرده و به دیگران ارائه دهیم.

مشاهده نمونه

  • مسعود می‌گه:

    عالی بود.ممنون

  • زهرا می‌گه:

    سلام ممنون از اموزش خوبتون. من یک سوال داشتم من باید یک وب سایت با php بنویسیم و در این وب سایت باید امکان ثبت نام کاربر وجود داشته باشد زمانی که کاربر دارد فرم ثبت نام را پر می کند باید مکان مورد نظرش را بر روی نقشه علامت گذاری کند من چه جوری می تونم این کار انجام بدم ممنون از راهنماییتون

  • alireza می‌گه:

    با سلام …این آدرسو http://aparnet.ir/demo/904/ من رفتم ولی چطوری مختصاتشو وارد کنیم ؟

  • احمدی می‌گه:

    سلام با تشکر از آموزشتون
    http://www.iranvtn.com/
    این سایت ها چطور ساخته میشند!؟

  • سعید می‌گه:

    سلام ، من عادت ندارم از کسی تشکر کنم ولی این از شما بخاطر این کمکتون تشکر می کنم،،،در ضمن میشه آموزش ساخت فرم ارسال نظرات را واسم میل کنید؟؟

  • احمد می‌گه:

    ممنون خیلی جالب
    بود

  • soheil می‌گه:

    saite kheili khubi darin.mamnoon

  • دارکوب می‌گه:

    استفاده از نقشه جدید گوگل در وب سایت و سفارشی سازی آن
    آدرس سایت: Link

  • یاسین می‌گه:

    سلام.ممنون از آموزش بسیار خوب و مفیدتون.


  • نظرات این مطلب بسته است.