I could not display this marker inside my polygon boundary

Hi,I need some help please,

I have this coordinates stored in my geofencetbl


53.198526418064645,-105.76238214969635
53.198564980328875,-105.76508045196533
53.199002016899044,-105.76231241226196
53.19939406061905,-105.76508045196533
53.19941012790812,-105.76509118080139
53.19941976827867,-105.76212465763092
53.199426195191194,-105.76357841491699

I want to put marker inside my polygon boundary like this example.
Point in polygon

but unfortunately it doesn’t work.the marker did not display on the map.can you help me on this please.

Thank you in advance.


<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <style>
        html, body{
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
    </style>
    <script type="text/javascript">

        var polySides = 6;//number of points in polygon
        //horizontal Latitude coordinates of polygon
        var polyLat  = new Array();

        polyLat[0]=53.198526418064645;
        polyLat[1]=53.198564980328875;
        polyLat[2]=53.199002016899044;
        polyLat[3]=53.19939406061905;
        polyLat[4]=53.19941012790812;
        polyLat[5]=53.19941976827867;
        polyLat[6]=53.199426195191194;


        var polyLng =  new Array();

        polyLng[0]=-105.76238214969635;
        polyLng[1]=-105.76508045196533;
        polyLng[2]=-105.76231241226196;
        polyLng[3]=-105.76508045196533;
        polyLng[4]=-105.76509118080139;
        polyLng[5]=-105.76212465763092;
        polyLng[6]=-105.76357841491699;



        var maxLat = Math.max.apply(null,polyLat);
        var minLat = Math.min.apply(null,polyLat);
        var maxLng = Math.max.apply(null,polyLng);
        var minLng = Math.min.apply(null,polyLng);

        var bounds='';

        function initialize() {

            initial = new google.maps.LatLng(53.199246241276875,-105.76864242553711);

            var mapOptions = {
                zoom: 16,
                center: initial,
                zoomControl: true

            };
            map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

        }




        $(function () {
            $.ajax({
                  type:'post',
                  dataType:'json',
                  data:'maxLat='+maxLat +'&minLat='+minLat +'&maxLng='+maxLng +'&minLng='+minLng,
                  url:'polygeofencephp',
                  success: function(data){

                      bounds  = new google.maps.LatLngBounds();
                      $.each(data,function(i,dat){

                                 if (pointInPolygon(polySides,polyLat,polyLng,dat.lat,dat.lng)){
                                      var latlng = new google.maps.LatLng(dat.lat,dat.lng);

                                      addMarker(latlng);
                                      bounds.extend(latlng);

                                  }

                      });
                      map.fitBounds(bounds);

                  }

            });
        });


        function pointInPolygon(polySides,polyX,polyY,x,y) {
            var j = polySides-1 ;
            oddNodes = 0;
            for (i=0; i<polySides; i++) {
                if (polyY[i]<y && polyY[j]>=y  ||  polyY[j]<y && polyY[i]>=y) {
                    if (polyX[i]+(y-polyY[i])/(polyY[j]-polyY[i])*(polyX[j]-polyX[i])<x)  {
                        oddNodes=!oddNodes;
                    }
                }
                j=i;
            }

            return oddNodes;
        }

     function addMarker(latlng){
            marker = new google.maps.Marker({
                position: latlng,
                map: map,
                draggable: false

            });
     }


        google.maps.event.addDomListener(window, 'load', initialize);



    </script>
</head>
<body>
<div id="map_canvas" style="width: 100%; height: 100%;"></div>
</body>
</html>


polygeofencephp


<?php

    include_once 'connection.php';



   $minlat = $_POST['minLat'];
   $maxlat = $_POST['maxLat'];
   $minlng = $_POST['minLng'];
   $maxlng = $_POST['maxLng'];

   $result = mysql_query("SELECT * FROM PLOT WHERE
                    (lat>='$minlat' AND lat<='$maxlat')
                    AND (lng>='$minlng' AND lng<='$maxlng')
                  ");



  while($row=mysql_fetch_array($result,MYSQL_BOTH)){
    $lat[]=$row['lat'];
    $lng[]=$row['lng'];


  }

   $result = array(
                    'lat'=>$lat,
                    'lng'=>$lng
   );


   echo  json_encode($result);
?>


I made some update code


<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <style>
        html, body{
            height: 100%;
            margin: 0px;
            padding: 0px;
        }
    </style>
    <script type="text/javascript">

  
var map;

var polySides = 7; //number of points in polygon
//horizontal Latitude coordinates of polygon
var polyLat = new Array();

polyLat[0] = 53.198524;
polyLat[1] = 53.198566;
polyLat[2] = 53.199001;
polyLat[3] = 53.199394;
polyLat[4] = 53.199409;
polyLat[5] = 53.199421;
polyLat[6] = 53.199425;
polyLat[7] = 53.198524;

var polyLng = new Array();

polyLng[0] = -105.762383;
polyLng[1] = -105.765083;
polyLng[2] = -105.762314;
polyLng[3] = -105.765083;
polyLng[4] = -105.765091;
polyLng[5] = -105.762123;
polyLng[6] = -105.763580;
polyLng[7] = -105.762383;

var maxLat = Math.max.apply(null, polyLat);
var minLat = Math.min.apply(null, polyLat);
var maxLng = Math.max.apply(null, polyLng);
var minLng = Math.min.apply(null, polyLng);

       var bounds = new google.maps.LatLngBounds;

        function initialize() {

            initial = new google.maps.LatLng(53.199246241276875,-105.76864242553711);

            var mapOptions = {
                zoom: 16,
                center: initial,
                zoomControl: true
         
            };
            map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

        }




        $(function () {
            $.ajax({
                  type:'post',
                  dataType:'json',
                  data:'maxLat='+maxLat +'&minLat='+minLat +'&maxLng='+maxLng +'&minLng='+minLng,
                  url:'polygeofencephp',
                  success: function(data){
                     
                      bounds  = new google.maps.LatLngBounds();
                      $.each(data,function(i,dat){

                                 if (pointInPolygon(polySides,polyLat,polyLng,dat.lat,dat.lng)){
                                        var latlng = new google.maps.LatLng(parseFloat(dat.lat),parseFloat(dat.lng));
                                      addMarker(latlng);
                                      bounds.extend(latlng);

                                  }

                      });
                      map.fitBounds(bounds);

                  }

            });
        });


        function pointInPolygon(polySides,polyX,polyY,x,y) {
            var j = polySides-1 ;
            oddNodes = 0;
            for (i=0; i<polySides; i++) {
                if (polyY[i]<y && polyY[j]>=y  ||  polyY[j]<y && polyY[i]>=y) {
                    if (polyX[i]+(y-polyY[i])/(polyY[j]-polyY[i])*(polyX[j]-polyX[i])<x)  {
                        oddNodes=!oddNodes;
                    }
                }
                j=i;
            }

            return oddNodes;
        }

     function addMarker(latlng){
            var marker = new google.maps.Marker({
                position: latlng,
                map: map,
                draggable: false

            });
			 marker.setMap(map);
     }


        google.maps.event.addDomListener(window, 'load', initialize);



    </script>
</head>
<body>
<div id="map_canvas" style="width: 100%; height: 100%;"></div>
</body>
</html>



    include_once 'connection.php';



   $minlat = $_POST['minLat'];
   $maxlat = $_POST['maxLat'];
   $minlng = $_POST['minLng'];
   $maxlng = $_POST['maxLng'];

   $queryresult = mysql_query("SELECT * FROM geofencetbl WHERE
                    (lat>='$minlat' AND lat<='$maxlat')
                    AND (lng>='$minlng' AND lng<='$maxlng')
                  ");


 $results = array(
      'lat' => array(),
      'lng' => array(),
  );

  while($row=mysql_fetch_array($queryresult,MYSQL_BOTH)){
      $results['lat'][] =$row['lat'];
      $results['lng'][] =$row['lng'];


  }

 

   echo  json_encode($results);



but i have problem on my success part,the dat.lat and dat.lng is undefined.
maybe there is something wrong with formation of my response in my serverside.

I change my php code to this


  $minlat = $_POST['minLat'];
   $maxlat = $_POST['maxLat'];
   $minlng = $_POST['minLng'];
   $maxlng = $_POST['maxLng'];

$queryresult = mysql_query("SELECT * FROM geofencetbl WHERE
                    (lat>='$minlat' AND lat<='$maxlat')
                    AND (lng>='$minlng' AND lng<='$maxlng')
                  ");



  while($row=mysql_fetch_object($queryresult)) {
      $results[] =$row;

  }



   echo  json_encode($results);


but it onlydraw only 1 marker