Guest User

Draw Polygons in Google Maps and Determine whether an Addres

a guest
Mar 21st, 2013
1,787
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <?php
  2.     /**
  3.      * Draw Polygons in Google Maps and Determine whether an Address is in Polygons
  4.      *
  5.      * This sample source code uses Google Maps Javascript API V3 to draw polygons in Google Maps.
  6.      * (Refer https://google-developers.appspot.com/maps/documentation/javascript/examples/drawing-tools)
  7.      *
  8.      * The address auto-complete uses Google Places Javascript library.
  9.      * (Refer https://developers.google.com/maps/documentation/javascript/places#places_autocomplete)
  10.      *
  11.      * The server-side code will retrieve address' latitude and longitude using Google Gecoding API.
  12.      * (Refer https://developers.google.com/maps/documentation/geocoding/)
  13.      *
  14.      * Using "Point-In-Polygon" Algorithm, the server-side code will determine whether address' coordinate is inside of polygons or outside.
  15.      * (Refer http://alienryderflex.com/polygon/)  
  16.      *
  17.      * ===== How To Use =====
  18.      *
  19.      * First, draw polygons
  20.      * Second, search address and click "Check Inside/Outside Polygons" submit button
  21.      *  
  22.      * ===== For Your Information =====
  23.      * If you need client-side Javascript to determine whether an address is in/out polygons,
  24.      * you can use google.maps.geometry.poly.containsLocation function in Google Maps API.
  25.      * (Refer https://developers.google.com/maps/documentation/javascript/reference#poly)
  26.      *
  27.      * The address auto-complete (Google Places Library) returns address information including coordinate.
  28.      *
  29.      * @author      Chris LEE
  30.      *
  31.      */
  32.  
  33.     // Set up default polygon
  34.     $polygons = array();
  35.  
  36.     $polygon = array(
  37.           array(-37.813310, 144.951553)
  38.         , array(-37.820836, 144.954901)
  39.         , array(-37.815209, 144.974728)
  40.         , array(-37.807750,144.971209)
  41.         , array(-37.813039,144.951468)
  42.     );
  43.    
  44.     // If received coordinates, then store into arrays
  45.     $got_coordinates = isset($_GET['coordinates']) ? $_GET['coordinates'] : array();
  46.    
  47.     if(!empty($got_coordinates))
  48.     {
  49.         foreach($got_coordinates as $coordinates)
  50.         {
  51.             if(!empty($coordinates))
  52.             {
  53.                 $new_box = array();
  54.                 foreach($coordinates as $coordinate)
  55.                 {
  56.                     $coordinate = explode("|", $coordinate);
  57.                     $new_box[] = array($coordinate[0], $coordinate[1]);    
  58.                 }
  59.                 $polygons[] = $new_box;
  60.                 unset($new_box);
  61.             }
  62.         }
  63.     }
  64.     else
  65.     {
  66.         $polygons[] = $polygon;
  67.     }
  68.     unset($polygon);
  69.     unset($got_coordinates);
  70.    
  71.     // Set up default address
  72.     $got_this_address = isset($_GET['address']) ? $_GET['address'] : "140 Elizabeth Street, Melbourne, Victoria, Australia";
  73.    
  74.     // Get address coordinate from Google Maps API
  75.     $address = json_decode(get_address_coordinate($got_this_address));
  76.    
  77.     if(!empty($address->results))
  78.     {
  79.         $address = $address->results[0];
  80.     }
  81.     $address_x = $address->geometry->location->lat;
  82.     $address_y = $address->geometry->location->lng;
  83.    
  84.     $result = "";
  85.    
  86.     if(!empty($polygons))
  87.     {
  88.         foreach($polygons as $polygon)
  89.         {
  90.             $no_of_polygons = sizeof($polygon);
  91.            
  92.             $polygons_x = array();
  93.             $polygons_y = array();
  94.            
  95.             foreach($polygon as $poly)
  96.             {
  97.                 $polygons_x[] = $poly[0];
  98.                 $polygons_y[] = $poly[1];
  99.             }
  100.            
  101.            
  102.             if (determine_in_polygon($no_of_polygons, $polygons_x, $polygons_y, $address_x, $address_y))
  103.             {
  104.                 $result = "The Address '".$got_this_address."' (". $address_x.", ".$address_y.") is in polygons!";
  105.                 break;
  106.             }
  107.         }
  108.     }
  109.    
  110.     if($result == "")
  111.     {
  112.         $result = "The Address '".$got_this_address."' (". $address_x.", ".$address_y.") is not in polygons!";
  113.     }
  114.    
  115.     function determine_in_polygon($no_of_polygons, $polygons_x, $polygons_y, $address_x, $address_y) {
  116.         $j = $no_of_polygons - 1;
  117.         $odd_nodes = 0;
  118.         for ($i = 0; $i < $no_of_polygons; $i++)
  119.         {
  120.             if ($polygons_y[$i] < $address_y && $polygons_y[$j] >= $address_y || $polygons_y[$j] < $address_y && $polygons_y[$i] >= $address_y)
  121.             {
  122.                 if ($polygons_x[$i] + ($address_y - $polygons_y[$i]) / ($polygons_y[$j] - $polygons_y[$i]) * ($polygons_x[$j] - $polygons_x[$i]) < $address_x)
  123.                 {
  124.                     $odd_nodes = !$odd_nodes;
  125.                 }
  126.             }
  127.             $j = $i;
  128.         }
  129.  
  130.         return $odd_nodes;
  131.     }
  132.    
  133.     function get_address_coordinate($address)
  134.     {
  135.             $url = "http://maps.googleapis.com/maps/api/geocode/json?address=".urlencode($address)."&sensor=false";
  136.             $ch = curl_init();
  137.             curl_setopt($ch, CURLOPT_URL, $url);
  138.             curl_setopt($ch, CURLOPT_HEADER, 0);
  139.             curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
  140.             $output = curl_exec($ch);
  141.             curl_close($ch);
  142.             return $output;
  143.     }
  144. ?><!DOCTYPE html>
  145. <html>
  146.     <head>
  147.         <title>Draw Polygons in Google Maps and Determine whether an Address is in Polygons</title>
  148.         <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  149.         <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  150.         <meta charset="utf-8">
  151.         <style>
  152.              #map {
  153.                 padding: 0;
  154.                 margin: 0;
  155.                 width: 65%;
  156.                 height: 65%;
  157.                 position: absolute;
  158.               }
  159.        
  160.               #panel {
  161.                 width: 65%;
  162.                 font-family: Arial, sans-serif;
  163.                 font-size: 13px;
  164.                 margin: 10px;
  165.               }
  166.         </style>
  167.        
  168.         <script src="http://maps.google.com/maps/api/js?sensor=false&libraries=geometry,places,drawing"></script>
  169.         <script>
  170.             var map, drawing_manager, selected_shape, overlays = [];
  171.            
  172.             function clear_selection()
  173.             {
  174.                 if (selected_shape)
  175.                 {
  176.                   selected_shape.setEditable(false);
  177.                   selected_shape = null;
  178.                 }
  179.             }
  180.            
  181.             function set_selection(shape)
  182.             {
  183.                 clear_selection();
  184.                 selected_shape = shape;
  185.                 shape.setEditable(false);
  186.             }
  187.    
  188.             function delete_selected_shape()
  189.             {
  190.                 if (selected_shape) {
  191.                     if(overlays)
  192.                     {
  193.                         $.each(overlays, function(i, overlay){
  194.                             if(overlay == selected_shape)
  195.                             {
  196.                                 overlays[i] = null;
  197.                             }
  198.                         });
  199.                     }
  200.                    
  201.                     selected_shape.setMap(null);
  202.                     reset_coordinates();
  203.                 }
  204.             }
  205.            
  206.             function reset_coordinates()
  207.             {
  208.                 $("#coordinates").html("");
  209.                 var index = 0;
  210.                 if(overlays)
  211.                 {
  212.                     $.each(overlays, function(i, overlay){
  213.                         if(overlay)
  214.                         {
  215.                             $.each(overlay.getPath().getArray(), function (j, coordinate){
  216.                                 $("#coordinates").append('<input type="hidden" name="coordinates['+index+'][]" value="' + coordinate.lat() + "|" + coordinate.lng() + '" />');
  217.                             });
  218.                             index++;
  219.                         }
  220.                     });
  221.                 }
  222.             }
  223.            
  224.             function initialize()
  225.             {
  226.                 // Set up Address Autocomplete
  227.                 var input = $("#address")[0];
  228.                 var autocomplete = new google.maps.places.Autocomplete(input);
  229.        
  230.                 // Set up Google Map
  231.                 map = new google.maps.Map($("#map")[0], {
  232.                     zoom: 15,
  233.                     center: new google.maps.LatLng(<?php echo $address_x;?>, <?php echo $address_y;?>),
  234.                     mapTypeId: google.maps.MapTypeId.ROADMAP,
  235.                     disableDefaultUI: true,
  236.                     zoomControl: true
  237.                 });
  238.                
  239.                 var marker = new google.maps.Marker({
  240.                     position: new google.maps.LatLng(<?php echo $address_x;?>, <?php echo $address_y;?>),
  241.                     map: map,
  242.                     title: "<?php echo $got_this_address;?>"
  243.                 });
  244.                
  245.                
  246.                 // Configure drawingManager options
  247.                 var polygon_options = {
  248.                     editable: true,
  249.                     strokeColor : "#0000FF",
  250.                     strokeOpacity : 0.8,
  251.                     strokeWeight : 2,
  252.                     fillColor : "#0000FF",
  253.                     fillOpacity : 0.4
  254.                 };
  255.                
  256.                 // Set up drawing manager
  257.                 drawing_manager = new google.maps.drawing.DrawingManager({
  258.                   drawingControl: true,
  259.                   drawingControlOptions: {
  260.                     position: google.maps.ControlPosition.TOP_CENTER,
  261.                     drawingModes: [
  262.                       google.maps.drawing.OverlayType.POLYGON,
  263.                     ]
  264.                   },
  265.                   markerOptions: {
  266.                     draggable: true
  267.                   },
  268.                   polylineOptions: {
  269.                     editable: true
  270.                   },
  271.                   polygonOptions: polygon_options,
  272.                   map: map
  273.                 });
  274.                
  275.                 google.maps.event.addListener(drawing_manager, "overlaycomplete", function(e) {
  276.                     if (e.type != google.maps.drawing.OverlayType.MARKER)
  277.                     {
  278.                         drawing_manager.setDrawingMode(null);
  279.            
  280.                         var new_shape = e.overlay;
  281.                         new_shape.type = e.type;
  282.                        
  283.                         google.maps.event.addListener(new_shape, "click", function() {
  284.                           set_selection(new_shape);
  285.                         });
  286.                        
  287.                         set_selection(new_shape);
  288.                         overlays.push(new_shape);
  289.                        
  290.                         reset_coordinates();
  291.                     }
  292.                 });
  293.                
  294.                
  295.                
  296.                 google.maps.event.addListener(drawing_manager, "drawingmode_changed", clear_selection);
  297.                 google.maps.event.addListener(map, "click", clear_selection);
  298.                 google.maps.event.addDomListener($("#delete-button")[0], "click", delete_selected_shape);
  299.                
  300.                 // Set up polygons
  301.                 <?php
  302.                     if(!empty($polygons))
  303.                     {
  304.                         foreach($polygons as $key => $polygon)
  305.                         {
  306.                 ?>
  307.                 var poly<?php echo $key;?>, box<?php echo $key;?>;
  308.                 box<?php echo $key;?> = [
  309.                 <?php
  310.                             foreach($polygon as $polygon_key => $co)
  311.                             {
  312.                                 if($polygon_key != 0)
  313.                                 {
  314.                                     echo ", ";
  315.                                 }
  316.                 ?>
  317.                     new google.maps.LatLng(<?php echo $co[0];?>, <?php echo $co[1];?>)
  318.                 <?php
  319.                             }
  320.                 ?>
  321.                 ];
  322.                 poly<?php echo $key;?> = new google.maps.Polygon({
  323.                     paths : box<?php echo $key;?>,
  324.                     strokeColor : "#0000FF",
  325.                     strokeOpacity : 0.8,
  326.                     strokeWeight : 2,
  327.                     fillColor : "#0000FF",
  328.                     fillOpacity : 0.4
  329.                 });
  330.                 poly<?php echo $key;?>.setMap(map);
  331.                
  332.                 google.maps.event.addListener(poly<?php echo $key;?>, "click", function() {
  333.                   set_selection(poly<?php echo $key;?>);
  334.                 });
  335.                 set_selection(poly<?php echo $key;?>);
  336.                 overlays.push(poly<?php echo $key;?>);
  337.                 <?php
  338.                         }
  339.                     }
  340.                 ?>
  341.                
  342.             }
  343.            
  344.             google.maps.event.addDomListener(window, "load", initialize);
  345.            
  346.         </script>
  347.     </head>
  348.     <body>
  349.         <h1>Draw Polygons in Google Maps and Determine whether an Address is in Polygons</h1>
  350. <pre>/**
  351.  * Draw Polygons in Google Maps and Determine whether an Address is in Polygons
  352.  *
  353.  * This sample source code uses Google Maps Javascript API V3 to draw polygons in Google Maps.
  354.  * (Refer https://google-developers.appspot.com/maps/documentation/javascript/examples/drawing-tools)
  355.  *
  356.  * The address auto-complete uses Google Places Javascript library.
  357.  * (Refer https://developers.google.com/maps/documentation/javascript/places#places_autocomplete)
  358.  *
  359.  * The server-side code will retrieve address' latitude and longitude using Google Gecoding API.
  360.  * (Refer https://developers.google.com/maps/documentation/geocoding/)
  361.  *
  362.  * Using "Point-In-Polygon" Algorithm, the server-side code will determine whether address' coordinate is inside of polygons or outside.
  363.  * (Refer http://alienryderflex.com/polygon/)  
  364.  *
  365.  * ===== How To Use =====
  366.  *
  367.  * First, draw polygons
  368.  * Second, search address and click "Check Inside/Outside Polygons" submit button
  369.  *  
  370.  * ===== For Your Information =====
  371.  * If you need client-side Javascript to determine whether an address is in/out polygons,
  372.  * you can use google.maps.geometry.poly.containsLocation function in Google Maps API.
  373.  * (Refer https://developers.google.com/maps/documentation/javascript/reference#poly)
  374.  *
  375.  * The address auto-complete (Google Places Library) returns address information including coordinate.
  376.  *
  377.  * @author      Chris LEE
  378.  *
  379.  */</pre>
  380.         <div id="panel">
  381.             <form method="get">
  382.                 Search Address: <input type="text" id="address" name="address" value="<?php echo $got_this_address;?>" style="width:50%;"/>
  383.                 <input type="submit" value="Check Inside/Outside Polygons" />
  384.                 <div id="coordinates" style="display:none;">
  385.                     <?php
  386.                         if(!empty($polygons))
  387.                         {
  388.                             foreach($polygons as $key => $polygon)
  389.                             {
  390.                                 if(!empty($polygon))
  391.                                 {
  392.                                     foreach($polygon as  $b)
  393.                                     {
  394.                     ?>
  395.                     <input type="hidden" name="coordinates[<?php echo $key;?>][]" value="<?php echo $b[0];?>|<?php echo $b[1];?>" />
  396.                     <?php
  397.                                     }
  398.                                 }      
  399.                             }
  400.                         }
  401.                     ?>
  402.                    
  403.                 </div>
  404.             </form>
  405.             <br />
  406.             <strong><?php echo $result;?></strong>
  407.             <br /><br />
  408.             <button id="delete-button">Delete Selected Polygon</button>
  409.            
  410.         </div>
  411.         <div id="map"></div>
  412.         <br /><br />
  413.             <br /><br />
  414.         <script type="text/javascript">
  415.           var _gaq = _gaq || [];
  416.           _gaq.push(['_setAccount', 'UA-1581881-5']);
  417.           _gaq.push(['_trackPageview']);
  418.        
  419.           (function() {
  420.             var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  421.             ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  422.             var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  423.           })();
  424.        
  425.         </script>
  426.     </body>
  427. </html>
RAW Paste Data