تخفیف ویژه

آموزش استفاده از نقشه گوگل در صفحات وب - Google Maps (جلسه 4) - بزرگنمایی نقشه و تغییر زبان

دسته بندی: آموزش
زمان مطالعه: 6 دقیقه
۱۳ تیر ۱۳۹۵

در این مطلب با ادامه آموزش Google Maps در خدمتتون هستیم.

google-maps

در این جلسه میخایم در مورد بزرگنمایی یا Zoom و همچنین تغییر زبان نقشه گوگل صحبت کنیم.

شما میتونین با تغییر دادن مقدار ویژگی zoom بزرگنمایی بر روی نقشتون رو کم و زیاد کنید. این ویژگی اجباری هست و حتما باید یک مقدار رو برای بزرگنمایی نقشتون در نظر بگیرید. نحوه استفاده از اون بصورت زیر هست:

var mapOptions = {
   zoom: zoom value
};

بجای zoom value باید مقدار مورد نظر خودتون رو قرار بدین. کمترین عدد 0 و بیشترین 21 هست. البته خودم اینا رو تست کردم و در منبع نوشته نشده. حالا چنتا نمونه از بزرگنمایی‌های مختلف نشونتون میدیم تا بیشتر متوجه بشید.

مورد 1 : بزرگنمایی 0

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "http://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
         
            var mapOptions = {
               center:new google.maps.LatLng(17.609993, 83.221436),
               zoom:0,
               mapTypeId:google.maps.MapTypeId.TERRAIN
            };
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
         
         google.maps.event.addDomListener(window, 'load', loadMap);
      </script>
      
   </head>
   
   <body>
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

خروجی بصورت زیر هست:zoom 0 google maps

مورد 2 : بزرگنمایی 5

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "http://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
         
            var mapOptions = {
               center:new google.maps.LatLng(17.609993, 83.221436),
               zoom:5,
               mapTypeId:google.maps.MapTypeId.TERRAIN
            };
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
         
         google.maps.event.addDomListener(window, 'load', loadMap);
      </script>
      
   </head>
   
   <body>
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

خروجی بصورت زیر هست:zoom 5 google maps

مورد 3 : بزرگنمایی 21

<!DOCTYPE html>
<html>
   
   <head>
      <script src = "http://maps.googleapis.com/maps/api/js"></script>
      
      <script>
         function loadMap() {
         
            var mapOptions = {
               center:new google.maps.LatLng(17.609993, 83.221436),
               zoom:21,
               mapTypeId:google.maps.MapTypeId.TERRAIN
            };
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
         
         google.maps.event.addDomListener(window, 'load', loadMap);
      </script>
      
   </head>
   
   <body>
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>
   
</html>

خروجی بصورت زیر هست:zoom 21 google maps

دیدید که میتونین مقدار بزرگنمایی رو بصورت دلخواه تغییر داد.

حالا میخایم در مورد نحوه عوض کردن زبان Google Maps توضیح بدیم. کلا گوگل مپ از زبانهای زیر پشتیبانی میکنه:google maps language support

میبینید که در بین موارد بالا زبان ما که همون Farsi هس دارای Language Code یا کد زبان fa هست. حالا میتونیم با استفاده از اضافه کردن language=fa به آخر آدرس API نقشه گوگل، زبان این نقشه رو تغییر بدیم. بصورت زیر:

<script src = "https://maps.googleapis.com/maps/api/js?language=fa"></script>

کل کد بصورت زیر میشه:

<!DOCTYPE html>
<html>
   <head>
      <script src = "https://maps.googleapis.com/maps/api/js?language=fa"></script>
      
      <script>
         function loadMap() {
         
            var mapOptions = {
               center:new google.maps.LatLng(29.5917677, 52.5836982),
               zoom:9, 
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
            
            var map = new google.maps.Map(document.getElementById("sample"),mapOptions);
         }
      </script>
      
   </head>
   
   <body onload = "loadMap()">
      <div id = "sample" style = "width:580px; height:400px;"></div>
   </body>

</html>

خروجی کد بالا بصورت زیر هست:google maps fa language

میبینید که نوشته هایی که قبلا بصورت انگلیسی بودن، الان بصورت فارسی نمایش داده میشن.

در جلسات بعدی بیشتر در مورد این ابزار قدرتمند گوگل صحبت میکنیم.

امیدوارم از این جلسه خوشتون اومده باشه.

موفق باشید

یا علی

Source

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

جلسات دوره

نظرات کاربران

ghazaleh-setad

سلام
وقت بخیر
به منظور قراردادن چندلینک به سایت های مختلف برروی یک تصویر (نقشه استان تهران) احتیاج به مختصات مناطق 22 گانه دارم که با قراردادن این مختصات درکد مربوطه هنگام کلیک روی مثلا کل استان تهران به سایت دلخواه برود.
محبت می کنید اگر راهنمایی کنید.
سپاسگزارم

محمد اسفندیاری

در قسمتهای بعدی نحوه نشانه گذاری بر روی نقشه آموزش داده میشه
صبور باشید

هادی

با سلام خدمت آقای اسفندیاری ، با تشکر از آموزش خوبتون
میخواستم بدونم چطور میشه مختصات منطقه جغرافیایی مورد نظرمان را به صورت پیشفرض در وسط صفحه قرار داد ، مثل شهر شیراز که شما قرار دادید؟ خیلی ممنون

محمد اسفندیاری

سلام دوست عزیز
همونطور که قبلا گفتیم این مورد در جلسات بعدی بصورت کامل توضیح داده میشه و فعلا در همین حد بدونید که باید با استفاده از ویژگی LatLng، طول و عرض جغرافیای مورد نظرتون رو مشخص کنید تا نمایش داده بشه
موفق باشید

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.