Marker on Point in polygon not displaying - php

Question

I want to display marker inside the polygon like this example that i followed.
Point in polygon
But the marker did not show up.I think there is missing in my code,this is the coordinates that i saved to my database.
53.198524,-105.762383
53.198566,-105.765083
53.199001,-105.762314
53.199394,-105.765083
53.199409,-105.765091
53.199421,-105.762123
53.199425,-105.763580
I appreciate someone can help me to figure it out on how to get this work.
var map;
var polySides = 7;
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,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE
},
mapTypeControl: false
};
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:'polygeofence.php',
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){
marker = new google.maps.Marker({
position: latlng,
map: map,
draggable: false
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
php code
$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);
Edit:after edited my code,I have problem on my sucess dat.lat and dat.lng are undefined

Answer 1

Quite a lot of issues in your code. You are missing many variables declarations, and other stuff.
I commented most of my changes like that:
// missing bounds object here
var bounds = new google.maps.LatLngBounds();
I removed the AJAX part since of course it is not going to work. I am just creating one marker. No polygon. But at least this shows you that a correct LatLng object is passed to the addMarker() function.
Hope this helps!
JSFiddle demo
Edit:
Here is how you should create your JSON output.
$sql = "SELECT * FROM geofencetbl WHERE (lat>='$minlat' AND lat<='$maxlat') AND (lng>='$minlng' AND lng<='$maxlng')";
$result = $db->query($sql) or die($db->error);
while ($obj = $result->fetch_object()) {
$results[] = $obj;
}
echo json_encode($results);
Then in your AJAX success function, log dat and you should understand how to deal with it!