
<!DOCTYPE html>
<html>
     <head>
      <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
      <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true">
      </script>
      
<?php
     $pc_info_url='http://www.uk-postcodes.com/postcode/';
     
     if(isset($_POST['postcode']) && !empty($_POST['postcode']))
     {
      $postcode=str_replace(' ','',strtolower(trim(strip_tags($_POST['postcode']))));
      $ext=".xml";
      
      $search_url = $pc_info_url.$postcode.$ext;
      $xml_content=file_get_contents($search_url);
      
      $xml = new SimpleXMLElement($xml_content);
      
      //pre($xml);
      
      $geo_info=get_object_vars($xml->geo);
      $administrative_district = get_object_vars($xml->administrative->district);
      $latitude = $geo_info['lat'];
      $longitude = $geo_info['lng'];
      $str = '
      <span class="title">Informations for '.strtoupper($postcode).'</span>
      Local authority: <a href="'.$administrative_district['uri'].'" target="_blank">'.$administrative_district['title'].'</a><br />';
     }
     else
     {
      // manchester piccadilly postcode default
      $latitude = '53.476879';
      $longitude = '-2.229793';
     }

?>
      
      <script type="text/javascript">
      function initialize() {
           var latlng = new google.maps.LatLng(<?php print($latitude); ?>, <?php print($longitude); ?>);
           var myOptions = {
            zoom: 15,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
           };
           var map = new google.maps.Map(document.getElementById("map_canvas"),
           myOptions);
           <?php
           if(strlen($str)>0)
           {
            print('var marker = new google.maps.Marker({
            position: latlng,
            title:"'.$administrative_district['title'].'"
           });
           marker.setMap(map);');
           }
           else
           {
            print('
            navigator.geolocation.getCurrentPosition(function(position) {
             initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
             map.setCenter(initialLocation);
             var marker = new google.maps.Marker({
                  position: initialLocation,
                  title: "Your current location"
             });
             marker.setMap(map);
            }, function() {
             handleNoGeolocation(browserSupportFlag);
            });
           ');
           }
           ?>
      }
      </script>
      
      
      <style type="text/css">
           html { height: 100% }
           body { height: 100%; margin: 0; padding: 0; font-family: Arial, Verdana, sans-serif; font-size: 1em;}
           #map_canvas { height: 100% }
           #pc_search_div {display: block; overflow: hidden; position: absolute; z-index:100; bottom:10px; left: 20px; padding: 10px; background-color: #708DCF; color: #fff; border-radius: 5px; opacity: 0.8; border: 1px solid #59688B;}
           p.infos {background-color: #fff; color: #222; border-radius: 5px; padding: 5px;}
           p.infos span.title {display: block; font-weight: bold; font-size: 1.3em; margin-bottom: 5px;}
      </style>
      
     </head>
<body onload="initialize()">

     <div id="pc_search_div">
      <form name="pc_search" id="pc_search" method="post" action="<?php print($_SERVER['PHP_SELF']); ?>">
           <label for="postcode">UK Postcode search:</label>
           <input type="text" name="postcode" id="postcode" maxlength="10" />
           <input type="submit" value="Search" />
      </form>
      <?php
      if(strlen($str)>0)
      {
           print('<p class="infos">'.$str.'</p>');
      }
      ?>
     </div>
     
     <div id="map_canvas" style="width: 100%; height: 100%"></div>

</body>
</html>