Привет всем пробую создать полигон свободной формы на гугл картах , что бы его можно было растягивать в любую сторону, но никак не могу
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<style>
#map {
height: 400px;
}
</style>
<body>
<?php
$servername = "localhost";
$username = "root";
$password = "";
$link = mysqli_connect($servername,$username, $password, 'task');
// var_dump($link);
$result = mysqli_query($link,"SELECT `lat`,`lng`,`field_pult_number`,`field_client`,`field_adress`,`field_summ_in_month`,`field_dogovor` FROM montazh_calendar WHERE `delete` = 0 AND `lat` > 0");
$points = [];
$pointsTwo = [];
while($row = mysqli_fetch_assoc($result)){
$points[] = $row;
$pointsTwo[] = $row;
}
// var_dump($points);
$points = json_encode($points);
// SELECT * FROM montazh_calendar WHERE `delete` = 0 AND `status` = 1
// SELECT * FROM montazh_calendar WHERE `delete` = 0 AND `lat` > 0
// SELECT `lat`,`lng` FROM montazh_calendar WHERE `delete` = 0 AND `lat` > 0
// SELECT `lat`,`lng` FROM montazh_calendar WHERE `delete` = 0 AND `lat` != ''
// SELECT `lat`,`lng`,`field_pult_number`,`field_client`,`field_adress`,`field_summ_in_month`,`field_dogovor` FROM montazh_calendar WHERE `delete` = 0 AND `lat` > 0
?>
<div id="map"></div>
<div class="container mt-4">
<h2 class="text-center mb-3">Test</h2>
<table class="table">
<thead>
<tr>
<th scope="col"></th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<?php
for ($i=0; $i < count($pointsTwo); $i++) { ?>
<tr>
<th scope="row">1</th>
<td><?php echo $pointsTwo[$i]['field_pult_number'];?> </td>
<td><?php echo $pointsTwo[$i]['field_client'];?></td>
<td>@mdo</td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: 50.475713,
lng: 30.516879
},
zoom: 5
});
initMarkers();
function initMarkers() {
// var dots =[{lat: 50.475713, lng: 30.516879 }]
var dots = '<?=$points?>';
// var dots = [
//new google.maps.LatLng(50.405440,30.469319),
//new google.maps.LatLng(50.019486,29.841963),
//new google.maps.LatLng(51.545427,29.534346),
//new google.maps.LatLng(51.073035,29.490401),
//new google.maps.LatLng(55.430602,29.841963),
//new google.maps.LatLng(51.485365,31.336104),
//new google.maps.LatLng(51.403195,31.643721),
//new google.maps.LatLng(50.740502,31.555830),
//new google.maps.LatLng(50.040081,31.072432),
//new google.maps.LatLng(49.898754,30.369307),
//new google.maps.LatLng(50.040081,30.017744)
//];
var myLatlng = {lat: -25.363, lng: 131.044};
marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Click to zoom'
});
marker.addListener('click', function() {
alert(1);
map.setZoom(8);
map.setCenter(marker.getPosition());
});
var polyOptions = {
path: dots,
strokeColor: "#FF0000",
strokeOpacity: 1,
strokeWeight: 3
}
var it = new google.maps.Polyline(polyOptions);
it.setMap(map);
dots = JSON.parse(dots);
console.log(dots);
for (var i = 0; i < dots.length; i++) {
var coords = dots[i];
var latLng = new google.maps.LatLng(coords.lat, coords.lng);
var marker = new google.maps.Marker({
position: latLng,
map: map,
title: coords.field_pult_number
+ ' [' + (coords.field_client) + '] '
+ ' [' + (coords.field_adress) + '] '
+ ' [' + (coords.field_summ_in_month) + '] '
+ ' [' + (coords.field_field_dogovor) + '] '
});
}
}
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDyAnMcgQ4TqGttyFKA5hxWYxIkzZpo3V8&callback=initMap" async defer></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
