Guest User

Draw Polygons in Google Maps and Determine whether an Addres

a guest
Mar 21st, 2013
1,805
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

Adblocker detected! Please consider disabling it...

We've detected AdBlock Plus or some other adblocking software preventing Pastebin.com from fully loading.

We don't have any obnoxious sound, or popup ads, we actively block these annoying types of ads!

Please add Pastebin.com to your ad blocker whitelist or disable your adblocking software.

×