ارتفاع نقشه یک از گزینه‌های
MapOptions
است که توسط آن می‌توان اندازه ارتفاع نقشه را تعیین نمود. به طور
پیشفرض این مقدار 200 پیکسل است که برای بکارگیری نقشه
به عنوان نمایش دادن مکان یا جزئیات اندک مناسب است. اما نقشه
می‌تواند به اندازه‌‌های دیگر نیز تغیر یابد.
مقدار پیکسلی ارتفاع زمانی مورد استفاده قرار می‌گیرد که مقدار دقیق در دسترس بوده و یا نیاز باشد نقشه بر اساس مقدار پیکسلی که تعیین می‌گردد دارای ارتفاع باشد. در مواقعی لازم است که بجای استفاده از مقدار پیکسل برای نقشه از درصد استفاده شود.
مقدار full ارتفاع نقشه را بر اساس ارتفاع کل صفحه
نمایش تعیین میکند و هر زمان اندازه صفحه تغییر یابد (بزرگ و کوچک
کردن اندازه مرورگر و ...) با توجه به رخداد
onresize صفحه اندازه را خودکار بروز میکند. نمایش
نقشه در نمای تمام صفحه می‌تواند در زمانی که نیاز به استفاده از
نقشه در صفحه‌ای جدا یا نمایش در یک باکس به صورت تمام صفحه، گزینه
مناسبی است.
بکارگیری درصد در خصوصیت height استایل
elementها با یک چالش کلی همراه است. در این مواقع
element مدنظر بر اساس وراثت از
parent element یا المنت والد درصد را اعمال میکند.
<div style="height:100px;">
<div style="height:50%;"></div>
</div>
heightدومینdivبر اساسdivاولیه یا والد برابر50پیکسل خواهد بود.
برای اعمال صحیح height با مقدار درصدی، لازم است مقدار
100% به ارتفاع مربوط به استایل body و
html اختصاص یابد.
<style>
body,
html {
height: 100%;
}
</style>elementها
همپنین باید توالی از والدهایی که container در آن است
دارای height مشخصی باشند. این توالی باید تا تگ
body وجود داشته باشد. توالی از ارتفاع درصدی که از
body تا div مربوط به نقشه که با id با
مقدار map ادامه یافته است، سبب می‌گردد نقشه با ارتفاع
مشخصی در صفحه نمایش یابد.
<body>
<div style="height:100%;">
<div style="height:100%;">
<div id="map">
</div>
</div>
</div>
</body>
با قرار دادن مقدار 100% در خصوصیت
height
مربوط به گزینه‌های نقشه با رعایت موارد قبلی نقشه ایجاد شده در
ابعاد 100% ارتفاع نمایش می‌یابد.
var map = new parsimap.Map({
height: '100%',
center: { lat: 35.7575, lng: 51.41 },
id: 'map',
});<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Creating Map</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* Optimal: The sample page fit to window. */
body {
margin: 0;
}
</style>
<script src="https://pm2.parsimap.com/api/v2/parsimap.js?key=API_KEY"></script>
</head>
<body>
<!-- Adding height style to html and body elements. -->
<style>
body,
html {
height: 100%;
}
</style>
<!--
Define sequence of elements with 100% height from body element to
map container element.
-->
<div style="height:100%;">
<div style="height:100%;">
<div id="map"></div>
</div>
</div>
<script>
// Create a map with 100% height.
var map = new parsimap.Map({
height: '100%',
center: { lat: 35.7575, lng: 51.41 },
id: 'map',
});
</script>
</body>
</html>نمونه: ارتفاع نقشه برحسب درصد.