My goal is to create a cluster on polygons using google maps and codingniter

Question

What I would like to do is pull the latitude and longitude values from a database and show them on a google map with polygon lines

The polygon lines have been successfully created, but I would like to have this polygon line appear with zoom when clicking on a particular project from the database

This is my project table

ID
Project name
lat
lng
description

This is my land piece coord table

ID
project_id
lat
lng

I want to place my project on a map, so that when someone clicks the project, they see the land piece and its specifics

the code i already tried is https://www.webwiders.in/WEB01/cluster/

This is my controller

<?php
defined('BASEPATH') OR exit('No direct script access allowed');


class Site extends CI_Controller {
  public function __construct() {
    parent::__construct();
    $this->db->query("set sql_mode = ''");
        
  }
    
    
    public function index(){
        

        $this->load->view('site/index');
    }
?>

This is my view

<!DOCTYPE >
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>MarkerClustererPlus V3 Example</title>

    <style type="text/css">
      body {
        margin: 0;
        padding: 10px 20px 20px;
        font-family: Arial;
        font-size: 16px;
      }

      #map-container {
        padding: 6px;
        border-width: 1px;
        border-style: solid;
        border-color: #ccc #ccc #999 #ccc;
        -webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
        -moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
        box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
        width: 600px;
      }

      #map {
        width: 600px;
        height: 400px;
      }
    </style>

     <script src="https://maps.googleapis.com/maps/api/js? 
    key=yourkey"></script>
    <script type="text/javascript" src="<?= base_url() ?>assets/js/data.js"></script>
    <script src="https://unpkg.com/@googlemaps/markerclustererplus/dist/index.min.js"></script>

    <script type="text/javascript">
      <?php $properties = $this->common_model->GetAllData('properties' , '' , 'id' , 'desc');

       ?>
      function initialize() {

        var center = new google.maps.LatLng(28.079872, 78.357087);

        var map = new google.maps.Map(document.getElementById("map"), {
          zoom: 3,
          center: center,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
        });


        var markers = [];
        <?php foreach ($properties as $row) 
        {
          $lands = $this->common_model->GetAllData('land_marks' ,  array('p_id' => $row['id'] ), 
          'id' , 'desc');
          ?>
          var data = [];
          <?php
          foreach ($lands as $value) 
          { ?>

            var feed = {lat: <?=  $value["lat"] ?> , lng:<?=  $value["lng"] ?> };

            
            data.push(feed);
          
          var latLng = new google.maps.LatLng(
            '<?=  $value["lat"] ?>',
            '<?=  $value["lng"] ?>'
          );
          var marker = new google.maps.Marker({
            position: latLng,
          });
          markers.push(marker);      
    <?php }
    ?>
     const bermudaTriangle<?=  $row["id"] ?> = new google.maps.Polygon({
    paths: data,
    strokeColor: "#FF0000",
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: "#FF0000",
    fillOpacity: 0.35,
    });
    bermudaTriangle<?=  $row["id"] ?>.setMap(map);

    var markerCluster<?=  $row["id"] ?> = new MarkerClusterer(map, markers , {
    imagePath:
      "<?= base_url() ?>assets/images/m",
       
     });
    <?php
        }
    ?>
        
        
      }
      google.maps.event.addDomListener(window, "load", initialize);
    </script>
  </head>
  <body>
    <h3>A simple example of MarkerClustererPlus (100 markers)</h3>
    <div id="map-container"><div id="map"></div></div>
  </body>
</html>

Hakimuddin Saifee · Accepted Answer · 2021-09-01T06:39:42.997

In a table named properties, all properties are listed

id	name	lat	lng	created_at

Additionally, I have inserted properties land pieces (lat ,lng) in the table land_marks

id	p_id	part	lat	lng	created_at

    <!DOCTYPE >
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>MarkerClustererPlus V3 Example</title>

    <style type="text/css">
      body {
        margin: 0;
        padding: 10px 20px 20px;
        font-family: Arial;
        font-size: 16px;
      }

      #map-container {
        padding: 6px;
        border-width: 1px;
        border-style: solid;
        border-color: #ccc #ccc #999 #ccc;
        -webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
        -moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
        box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
        width: 600px;
      }

      #map {
        width: 600px;
        height: 400px;
      }
    </style>

 <script src="https://maps.googleapis.com/maps/api/js?key=YOURKEY"></script>
    <script type="text/javascript" src="<?= base_url() ?>assets/js/data.js"></script>
    <script src="https://unpkg.com/@googlemaps/markerclustererplus/dist/index.min.js"></script>

    <script type="text/javascript">
      <?php $properties = $this->common_model->GetAllData('properties' , '' , 'id' , 'desc');

       ?>
      function initMap() {
        var center = new google.maps.LatLng(28.079872, 78.357087);
        const iconBase = "<?= base_url() ?>assets/images/";
   
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 3,
    center: center,
  });
  
  const labels = [ "Mhow" , "Indore" ];
  var locdata = [];
        <?php foreach ($properties as $row) 
        { ?>

            var locfeed = {lat: <?=  $row["lat"] ?> , lng:<?=  $row["lng"] ?> };
            locdata.push(locfeed);

        <?php  

          $parts = $this->common_model->GetAllData('land_marks' ,  array('p_id' => $row['id'] ), 'id' , 'desc' ,'' , '' ,'' ,'part' );
          for($i=0; $i < count($parts); $i++){
          $lands = $this->common_model->GetAllData('land_marks' ,  array('p_id' => $row['id'] , 'part' => $parts[$i]['part'] ,  ), 'id' , 'desc' );
          ?>
            var data<?= $i ?> = [];
        <?php
        foreach ($lands as $value) 
        {  ?>

          var feed = {lat: <?=  $value["lat"] ?> , lng:<?=  $value["lng"] ?> };
          data<?= $i ?>.push(feed);

      <?php } ?>  
        // Construct the polygon.
     
  const poly<?=  $i.$row["id"] ?> = new google.maps.Polygon({
    paths: data<?=  $i ?>,
    strokeColor: "#000",
    strokeOpacity: 0.3,
    strokeWeight: 2,
    fillColor: "#000",
    fillOpacity: 0.35,
  });
  poly<?=  $i.$row["id"] ?>.setMap(map);
  google.maps.event.addListener(poly<?=  $i.$row["id"] ?>, "mousemove", function(event) {
    this.setOptions({strokeWeight: 4.0 , strokeOpacity: 0.9 , fillOpacity: 0.5})
  });
  google.maps.event.addListener(poly<?=  $i.$row["id"] ?>, "mouseout", function(event) {
    this.setOptions({strokeWeight: 1.0 , strokeOpacity: 0.3 , fillOpacity: 0.35})
  });

     <?php } } ?>
     var markerData = [];
  const markers = locations.map((location, i) => {
    var marker =  new google.maps.Marker({
      position: location,
      icon : iconBase + 'location.png',
      label: {text : labels[i % labels.length], color: "white"},
    });
     google.maps.event.addListener(marker, 'click', function() {
    map.panTo(this.getPosition());
    map.setZoom(18);
  });

     return marker
  });
  /* Change markers on zoom */
google.maps.event.addListener(map, 'zoom_changed', function() {
    var zoom = map.getZoom();
    // iterate over markers and call setVisible
    for (i = 0; i < markers.length; i++) {
        markers[i].setVisible(zoom <= 15);
    }
});

  // Add a marker clusterer to manage the markers.
  new MarkerClusterer(map, markers, {
    imagePath:
      "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m",
  });
  
}
const locations = [
<?php foreach ($properties as $row): ?>
  { lat: <?= $row['lat'] ?>, lng: <?= $row['lng'] ?> },
<?php endforeach ?>

  
];


      google.maps.event.addDomListener(window, "load", initMap);
    </script>
  </head>
  <body>
    <h3>A simple example of MarkerClustererPlus (100 markers)</h3>
    <div id="map-container"><div id="map"></div></div>
  </body>
</html>

Please add further details to expand on your answer, such as working code or documentation citations. — Community, Aug 31 '21 at 12:34

My goal is to create a cluster on polygons using google maps and codingniter

1 Answers1