สร้างแผนที่ Google Map แบบ Cluster สำหรับ Yii Framework 2

สำหรับบทเรียนรู้นี้มาสร้างแผนที่ Google Map แบบ Cluster ใน Yii Framework 2 กันครับ โดยจุดพิกัดจะรวมกันเมื่อมีการ Zoom Out และจะแยกกันเมื่อมีการ Zoom In ทำให้ดูง่ายและไม่ลายตาครับ

ถือว่าบทเรียนรู้นี้เป็นภาคต่อของ "Extension การสร้างแผนที่แบบต่างๆ ด้วย Google Map ใน Yii Framework 2" ก็ว่าได้ครับ หากใครยังไม่ได้ลองให้ไปเรียนรู้ก่อนได้ครับ จะได้เข้าใจพื้นฐานมากยิ่งขึ้น

เอาล่ะครับ ที่มาที่ไปก็หลังจากที่มีการ Request ให้ เจ้า 2amigos/yii2-google-maps-library ตัวนี้ช่วยสร้าง Map Cluster ให้หน่อย แต่ก็เงียบซะยาวนาน ก็มีคนได้นำตัวนี้ไปพัฒนาต่อและตั้งชื่อใหม่ซะ เพื่อให้เพิ่ม Map Cluster เข้าไปได้นั่นคือ Edofre/yii2-marker-clusterer (พระเอกเราเลย) สำหรับการติดตั้งก็ผ่าน Composer เช่นเคย

composer require edofre/yii2-marker-clusterer

จากนั้นก็เริ่มรำ Code กันได้ และมันง่าย (จริงๆ นะ) ในที่นี้เป็นเพียงแนวทางตัวอย่างนะครับ (ไม่ได้ใช้ Model ดึงข้อมูลจาก Database) แต่ดู Code แล้วน่าจะไปต่อกันได้ครับ เริ่มจาก Controller ก่อนแล้วกันครับ

frontend/controllers/SiteController.php

สร้าง action Map ไว้สำหรับสร้าง Marker อย่าลืม use LatLng ด้วยนะครับ ตามนี้

use dosamigos\google\maps\LatLng;
...
    public function actionMap()
    {
        $markers = [];
//กำหนดพิกัดในประเทศไทยเป็นตัวอย่าง
        $min_lat = 8;
        $max_lat = 19;
        $min_long = 98;
        $max_long = 105;

        for($i = 1; $i <= 50; $i++){
            
            $markers[] = ['place' => 'ทดสอบ '.$i, 'lat_long' => new LatLng(['lat' => rand($min_lat, $max_lat), 'lng' => rand($min_long, $max_long)])];
        }

        return $this->render('map', [
            'markers' => $markers
        ]);
    }
...

ใน view ก็เขียนโปรแกรมแสดงแผนที่ได้เลยนะครับ

frontend/views/site/map.php

<?php
use dosamigos\google\maps\LatLng;
use dosamigos\google\maps\overlays\InfoWindow;
use edofre\markerclusterer\Map;
use edofre\markerclusterer\Marker;

$this->title = 'Google Map Cluster';
?>
<?php
$map = new Map([
    'center' => new LatLng(['lat' => 15, 'lng' => 100]),
    'zoom' => 15,
    'width' => '100%',
    'height' => '600',
    'containerOptions' => [
        'id' => 'map-canvas',
    ]
]);
foreach ($markers as $key => $val) {

//var_dump($val);
$marker = new Marker([
    'position' => $val['lat_long'],
    'title' => $val['place'],
    'clickable' => true,
    //'icon' => 'https://mapicons.mapsmarker.com/wp-content/uploads/mapicons/shape-default/color-5ec8bd/shapecolor-dark/shadow-1/border-white/symbolstyle-white/symbolshadowstyle-no/gradient-no/departmentstore.png',
]);

$marker->attachInfoWindow(new InfoWindow(['content' => "
<h4><strong>{$val['place']}</strong></h4>

<table class='table table-bordered'>
    <tr>
        <td>Latitude/Longitude</td>
        <td>{$val['lat_long']}</td>
    </tr>
</table>
       
"]));
$map->addOverlay($marker);
}
$map->center = $map->getMarkersCenterCoordinates();//กำหนดให้แผนที่อยู่ตรงกลางใน Marker
$map->zoom = $map->getMarkersFittingZoom() - 1;

?>

<div class="row">
    <div class="col-sm-12 text-center">
        <?= $map->display(); ?>
    </div>
</div>

เมื่อทดสอบดูก็จะได้แบบนี้นั่นเอง

ครับเป็นตัวอย่างในการแสดงแผนที่แบบ Cluster สำหรับ Google Map นะครับ ลองนำไปประยุกต์ใช้ได้ครับ