ProgrammerThailand
สมัครใช้งาน เข้าสู่ระบบ
สมัครสมาชิก เข้าสู่ระบบ
  • หน้าหลัก
  • คอร์สเรียน
  • ตลาด
  • กระดานกระทู้
  • กิจกรรม
  • บทเรียนรู้
  • บทความ
  • งาน
  • นักพัฒนาฯ

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

  • หน้าหลัก
  • บทเรียน
  • คู่มือการเรียนรู้ Yii Framework 2 (Yii2)
  • สร้างแผนที่ Google Map แบบ Cluster สำหรับ Yii Framework 2

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

โดย มานพ กองอุ่น

7 มี.ค. 2017, 14:02:19

3,015

สำหรับบทเรียนรู้นี้มาสร้างแผนที่ 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 นะครับ ลองนำไปประยุกต์ใช้ได้ครับ

แชร์โพสต์นี้

  • google
  • map
  • cluster
  • yii framework

มานพ กองอุ่น

มานพ กองอุ่น : Developer

มานพ กองอุ่น

มานพ กองอุ่น
admin

  • 2 เพื่อน
  • 20 ผู้ติดตาม
  • 846 โพสต์

ความคิดเห็น

หากบทเรียนรู้มีความผิดพลาดประการใด หรือมีข้อเสนอแนะกรุณาแจ้ง contact@programmerthailand.com
เขียนบทเรียนของคุณในหมวดหมู่นี้

ร่วมเขียนบทเรียนจากประสบการณ์ของคุณ เพื่อแชร์ให้กับชนรุ่นหลังได้นำไปพัฒนาตัวเอง

  • โดย มานพ กองอุ่น
  • เปิดดู 3,015 ครั้ง
  • เขียนเมื่อ 7 มี.ค. 2017, 14:02:19
  • แก้ไขเมื่อ 7 มี.ค. 2017, 15:46:39
  • Tags google map cluster yii framework

เนื้อหาที่เกี่ยวข้อง

  • สารบัญคู่มือ Yii Framework 2 (Yii2)

  • Yii Framework คืออะไร

  • การเตรียมเครื่องมือก่อนการติดตั้ง Yii Framework 2 (Yii2) การติดตั้ง WampServer

  • การเตรียมเครื่องมือก่อนการติดตั้ง Yii Framework 2 (Yii2) ติดตั้ง Composer

  • แม่แบบ(Application Template) ใน Yii2

  • Gii การใช้ Gii Generator สำหรับ Basic Template

  • การสร้าง Virtual Host สำหรับ Yii2 Basic Application Template

  • การติดตั้ง Yii2 Advanced Application Template

  • Gii Generator สำหรับ Advanced Template

  • การสร้าง Virtual Host ใน Apache สำหรับ Yii2 Advanced Application Template

  • การจัดการ URL แบบสวยงาม (Pretty URL)

  • การ Update Yii2 ด้วย Composer

  • Extension การใช้งาน kartik Select2 แบบ AJAX (ข้อมูลเยอะ)

  • การสร้าง Theme จาก Material Design ใน Yii2 Advanced

  • การทำ CRUD ด้วย AJAX สำหรับ Yii2 GridView

  • จัดการสิทธิ์การเข้าถึงด้วย Role Base Access Control (RBAC) แบบใช้ฐานข้อมูล

  • การแก้ไขเมื่อติดตั้ง Yii Framework 2 แล้วพบ token(hidden)

  • การใช้งาน Model Scenario ใน Yii Framework 2

  • การติดต่อฐานข้อมูล MySQL, MongoDB, Microsoft SQL, PostgreSQL และ Oracle ด้วย Yii Framework 2

  • Extension การสร้างกราฟด้วย HighChart และ Drilldown Chart ใน Yii Framework 2

  • Extension การสร้างแผนที่แบบต่างๆ ด้วย Google Map ใน Yii Framework 2

  • การแสดงข้อมูลในแต่ละจังหวัดบนแผนที่ประเทศไทยด้วย Google GeoChart

  • การสร้างและใช้งาน Migration ใน Yii Framework 2

  • การทำ Facebook Login ใน Yii Framework 2

  • การทำ Transaction ใน Yii Framework 2

  • การใช้งาน TimestampBehavior ใน Model

  • การใช้ PayPal RESTful กับ Yii Framework 2

  • Extension การสร้างรายงานในรูปแบบไฟล์ PDF ด้วย mPDF

  • การทำ Web Application เพื่อรองรับ Search Engine และ Social Media

  • Extension การติดตั้งและสร้าง Theme ด้วย Yii2 AdminLTE Theme

  • การลงทะเบียน (Register) ไฟล์และสคริป CSS JavaScript (Client Script) ใน Web Application ด้วย Yii Framework 2

  • การใช้งาน GridView และการปรับแต่งเพิ่มเติมใน Yii Framework 2

  • การเขียนโปรแกรม Upload ไฟล์ด้วย Yii Framework 2

  • ทำความเข้าใจ MVC ใน Yii Framework 2

  • การจัดการกับ Flash Message ใน Yii Framework 2

  • หลักการทำงานของ Yii Framework 2 Request Life Circle

  • ทำความเข้าใจเส้นทาง (Routing) ใน Yii Framework 2

  • การทำเว็บหลายภาษา Internationalization (I18N) ด้วย Yii Framework 2

  • การทำ AJAX Validation ใน Yii Framework 2

  • การส่ง Email ด้วย Yii Framework 2 ผ่าน SMTP ของ Google

  • Extension การติดตั้งและใช้งาน CKEditor สำหรับ Yii Framework 2

  • การใส่เครื่องหมายดอกจัน (*) สีแดงหลัง Label ที่เป็นแบบ Required ใน Yii Framework 2

  • MaskedInput และ Validate หมายเลขประจำตัวประชาชนแบบ AJAX Validation ใน Yii Framework 2

  • แปลงวันที่ ค.ศ. เป็น พ.ศ. อัตโนมัติ โดยการ Custom ActiveRecord Model ใน Yii Framework 2

  • การใช้งาน BlameableBehavior เพือบันทึก User ID ที่กำลัง Login ใน Yii Framework 2

  • Theme แนวราชการสำหรับ Yii Framework 2

  • การแก้ไขเมื่อเกิดปัญหา ReflectionException NpmRepository does not exist ใน Composer

  • สร้างกราฟใน Yii Framework 2 ด้วย C3JS Chart

  • สร้าง Organization Chart ด้วย Google Visualization OrgChart สำหรับ Yii Framework 2

  • การติดตั้ง Yii2 Advanced บน Windows Server 2008

  • การทำระบบ Social Connect ด้วย AuthClient Part 1

  • การทำระบบ Social Connect ด้วย AuthClient Part 2

  • การสร้าง PDF Barcode ด้วย Yii Framework 2

  • การติดตั้งและใช้งาน Multiple Input สำหรับ Yii Framework 2

  • การใช้งาน Yii2 Scroll Pager แทนการใช้ Pagination ใน Yii Framework 2

  • การสร้าง LINE Bot แบบใช้ cURL ใน Yii Framework 2

  • การ Sort GridView แบบลากวางด้วย Sortable Gridview ใน Yii Framework 2

  • แบ่ง Session Backend และ Frontend ให้เป็นคนละตัวใน Yii Framework 2

  • ทดลองใช้ Realtime Database ใน Firebase ด้วย Yii Framework 2

  • การใช้งาน jQuery UI Autocomplete ใน Yii Framework 2

  • การติดตั้งและใช้งาน Bower Package ใน Yii Framework 2

  • สร้าง LINE Notify สำหรับ Post ลงกลุ่มใน LINE Group

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

  • การ Upload และ อ่านไฟล์ Excel ด้วย PHPExcel ใน Yii Framework 2

  • การใช้งาน SelectionColumn ใน GridView สำหรับ Yii Framework 2

  • การใช้งาน DepDrop (Dependent Dropdownlist) สำหรับเลือก ภาค จังหวัด อำเภอ และตำบล

  • ทำระบบ Tag สำหรับ Post ด้วย Taggable Behavior และ Selectize Widget

  • การนับจำนวนคนเปิดอ่านด้วย Yii Framework 2 กับ method updateCounters()

  • แปลง Timestamp ไปเป็น Timeago ด้วย Yii Framework 2 รองรับภาษาไทย

  • กำหนด Pagination Param สำหรับ Multiple GridView ใน Yii Framework 2

  • แสดงข้อมูลจาก Google Analytic Real-time และ AnalyticsReporting ด้วย Yii Framework 2

  • สร้าง .htaccess เพื่อกำหนดให้ใช้งาน SSL (https://) อัตโนมัติ สำหรับ Yii Framework 2

  • กำหนดให้ Autocomplete แสดงใน Modal

  • Simple URL Slug ด้วย Yii Framework 2

  • กำหนดให้ออกจากระบบอัตโนมัติหากไม่ได้ใช้งานตามเวลาที่กำหนด

  • เพิ่ม Application เหมือน Frontend-Backend ใน Yii Framework2

  • สร้างไฟล์ MS Word จาก Word Template สำหรับงานเอกสารราชการ

  • ติดตั้งและใช้งาน Bootstrap4 ใน Yii Framework 2

  • สร้าง Link สำหรับออกจากระบบโดยไม่ใช้ Form ใน Yii Framework 2

  • กำหนดให้ Login ใช้งาน Session เดียวใน Yii Framework 2

  • การติดตั้งและใช้งาน SweetAlert2 โดยไม่ใช้ Extension ใน Yii Framework 2

  • แทรกรูปภาพในเอกสาร MS Word จาก MS Word Template

  • แทรกตารางในเอกสาร MS Word จาก MS Word Template

  • บีบอัด JavaScript และ Cascade Style Sheet ใน Yii Framework 2

  • บีบอัดข้อมูลเว็บไซต์ให้เล็กลงด้วย Apache Mode Deflate

  • สร้าง QR Code ด้วย mPDF

  • การติดตั้ง bower package ใน Yii Framework 2 และ การสร้าง theme ด้วย materialize

  • Yii Framework2 กับ VueJS เรียก JSON ด้วย Axios

  • การจัดการสิทธิ์ใช้งานด้วย Rule สำหรับการเข้าถึง action ใน Access Control Filter

  • สร้างลิ้งค์เพื่อเปลี่ยนภาษาสำหรับเว็บไซต์หลายภาษา

  • แก้ไขทีละหลายๆ record ด้วย Yii Framework 2

  • ตัด frontend/web ใน url ให้สั้นลงใน Yii Framework 2

  • Upload file เข้าสู่ Amazon Web Service (AWS) S3 Storage ด้วย Yii Framework 2

  • จับ Session ใส่ Database ให้เข้าระบบ Session เดียว ใน Yii Framework 2

  • สร้าง theme bulma ใน Yii Framework 2

  • แปลง Timestamp เป็น Y-m-d H:i:s ด้วย beforeSave() และ afterFind()

  • สร้าง API แบบ RESTFul ด้วย Yii Framework 2 พร้อม Token JWT

  • แก้ปัญหาการแสดงผลภาษาไทยเพี้ยนใน HighChart

  • การติดตั้ง Package yii2-bootstrap4 สำหรับ Yii Framework 2

  • Role Base Access Control (RBAC) แบบ PhpManager

สังคมนักพัฒนาระบบในประเทศไทย

  • Phone: +66989616944, +66619569525
  • contact@programmerthailand.com

เกี่ยวกับเรา

  • เกี่ยวกับเรา
  • ติดต่อเรา
  • นโยบายการให้บริการ
  • นโยบายความเป็นส่วนตัว

น่าสนใจ

  • โปรแกรมเมอร์
  • งานไอที
  • แบบประเมินสุขภาพ
  • Affiliate

สมัครรับข่าวสาร

สมัครรับข่าวสารใหม่ และอัพเดทข้อมูลต่างๆ

© 2017 ProgrammerThailand. All rights reserved. Created by HanumanIT Co., Ltd.

ไม่พลาดการสื่อสารกับเรา

Programmer Thailand
ปิด