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>
CodePudding user response：
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>