SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,107
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Post I could not display this marker inside my polygon boundary

    Hi,I need some help please,


    I have this coordinates stored in my geofencetbl

    Code:
    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.
    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 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 Code:
    <?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);
    ?>

  2. #2
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,107
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I made some update code

    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>
    PHP Code:

        
    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.

  3. #3
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,107
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I change my php code to this
    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')
                      "
    );



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

      }



       echo  
    json_encode($results); 
    but it onlydraw only 1 marker


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •