در این مطلب با ادامه آموزش 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>
خروجی بصورت زیر هست:
مورد 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>
خروجی بصورت زیر هست:
مورد 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>
خروجی بصورت زیر هست:
دیدید که میتونین مقدار بزرگنمایی رو بصورت دلخواه تغییر داد.
حالا میخایم در مورد نحوه عوض کردن زبان Google Maps توضیح بدیم. کلا گوگل مپ از زبانهای زیر پشتیبانی میکنه:
میبینید که در بین موارد بالا زبان ما که همون 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>
خروجی کد بالا بصورت زیر هست:
میبینید که نوشته هایی که قبلا بصورت انگلیسی بودن، الان بصورت فارسی نمایش داده میشن.
در جلسات بعدی بیشتر در مورد این ابزار قدرتمند گوگل صحبت میکنیم.
امیدوارم از این جلسه خوشتون اومده باشه.
موفق باشید
یا علی
سلام
وقت بخیر
به منظور قراردادن چندلینک به سایت های مختلف برروی یک تصویر (نقشه استان تهران) احتیاج به مختصات مناطق 22 گانه دارم که با قراردادن این مختصات درکد مربوطه هنگام کلیک روی مثلا کل استان تهران به سایت دلخواه برود.
محبت می کنید اگر راهنمایی کنید.
سپاسگزارم
در قسمتهای بعدی نحوه نشانه گذاری بر روی نقشه آموزش داده میشه
صبور باشید
با سلام خدمت آقای اسفندیاری ، با تشکر از آموزش خوبتون
میخواستم بدونم چطور میشه مختصات منطقه جغرافیایی مورد نظرمان را به صورت پیشفرض در وسط صفحه قرار داد ، مثل شهر شیراز که شما قرار دادید؟ خیلی ممنون
سلام دوست عزیز
همونطور که قبلا گفتیم این مورد در جلسات بعدی بصورت کامل توضیح داده میشه و فعلا در همین حد بدونید که باید با استفاده از ویژگی LatLng، طول و عرض جغرافیای مورد نظرتون رو مشخص کنید تا نمایش داده بشه
موفق باشید