بکارگیری کانتینر پویا

container یک از گزینه‌های MapOptions است که توسط آن می‌توان تگی را به عنوان جایگاه نمایش تعیین نمود. به طور پیشفرض کانتینر هیچ مقداری نمی‌گیرد ولی درصورت بکارگیری، باید فراخوانی نقشه به صورت Dynamic Container باشد. قبل از بکارگیری کانتینر پویا لازم است Element مقصد را تعیین نمود که برای این منظور به دو روش می‌توان عمل کرد.

ایجاد Element جدید:

var mapElement = document.createElement('div');

استفاده از Element موجود:
```
var mapElement = getElementById('map_element');
```
Element با شناسه map_element در متغییر قرار می‌گیرد.

مقداردهی اولیه

متغییر mapElement حاوی Element باید به گزینه container اختصاص داده شده و فرایند ایجاد نقشه به شکل زیر باشد.

var map = new parsimap.Map({
    id: "MAP_ID",
    center: { lat: 35.7575, lng: 51.41 },
    container: mapElement
});

نقشه درون Element اختصاص یافته ایجاد می‌گردد.

در صورتیکه Element در نظر گرفته شده به عنوان کانتینر نقشه درون تگbody وجود نداشته و یا هنوز بدان اضافه نگردیده، کدها و توابع مربوط به نقشه تا زمانی که Element به تگ body اضافه نشود، اجرا نخواهد شد.

افزودن mapElement

زمانیکه Element در body وجود نداشته باشد به منظور ایجاد و نمایش نقشه باید آنرا به داخل body اضافه کرد و این افزودن می‌تواند به هر node داخل بدنه صفحه باشد.

document.body.appendChild(mapElement);

افزودن متغییر mapElement محتوی element نقشه به تگ body.

اگر متغییر mapElement مربوط به مولفه‌ای از داخل body باشد دیگر نیاز به انجام این مرحله نخواهد بود.

بررسی کد نهائی

<!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>
        <!--
            Using for exists element.
            <div id="map_element"></div>
        -->

        <script>
            // Create new div element.
            var mapElement = document.createElement('div');

            // using exists div element.
            // var mapElement = getElementById('map_element');

            // Using mapElement variable as container.
            var map = new parsimap.Map({
                id: 'map',
                center: { lat: 35.7575, lng: 51.41 },
                container: mapElement,
            });

            // Add mapElement variable contains map element into body.
            // Using it whenever mapElement has not exists Element in body.
            document.body.appendChild(mapElement);
        </script>
    </body>
</html>

نمونه: نقشه با کانتینر پویا

مستندات پارسی‌مپ

مستندات / جاوااسکریپت / راهنما / بکارگیری کانتینر پویا

بکارگیری کانتینر پویا

مقداردهی اولیه

افزودن mapElement

بررسی کد نهائی