سون لرن • آموزش

درباره سایت

آخرین مطالب

امکانات وب

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

0 19 ۱۳ تیر ۹۵

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

google-maps

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

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

var mapOptions = {

zoom: zoom value

};

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

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

<!DOCTYPE html>

<html>

<head>

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>

</body>

</html>

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

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

<!DOCTYPE html>

<html>

<head>

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>

</body>

</html>

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

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

<!DOCTYPE html>

<html>

<head>

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>

</body>

</html>

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

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

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

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

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

<!DOCTYPE html>

<html>

<head>

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>

</html>

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

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

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

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

موفق باشید

یا علی

Source

برچسب: نویسنده: استخدام کار تاريخ: دوشنبه 14 تير 1395 ساعت: 9:25

درباره سایت

آخرین مطالب

امکانات وب

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

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

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

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

صفحه بندی

آرشیو مطالب

پيوندهای روزانه

لینک دوستان

خبرنامه