Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

Untitled

By: a guest on Apr 28th, 2012  |  syntax: None  |  size: 6.48 KB  |  hits: 19  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <link rel="stylesheet" type="text/css" href="css/style.css">
  5. <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
  6. <script type="text/javascript"
  7.                 src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDX7Gqep0RvvG0Gb7ic1ZNcMtKvWZrJEMw&sensor=false"></script>
  8. <script src="clearbox/clearbox.js" type="text/javascript"></script>
  9. <script src="clearbox/clearbox.js?dir=scripts/clearbox&lng=eng" type="text/javascript"></script>
  10. <script type="text/javascript">
  11.         var
  12.                         markers = [], // Masīvs ar marker'iem, kas ir uz kartes
  13.                         map;
  14.        
  15.         function initialize(){
  16.  
  17.                 var styleArray = [
  18.                         {
  19.                                 featureType : 'all',
  20.                                 stylers : [
  21.                                         { saturation : -255 }
  22.                                 ]
  23.                         },
  24.                         {
  25.                                 featureType : 'road.arterial',
  26.                                 elementType : 'geometry',
  27.                                 stylers : [
  28.                                         { hue : '#606060' },
  29.                                         { saturation : 0 }
  30.                                 ]
  31.                         },
  32.                         {
  33.                                 featureType : 'poi.business',
  34.                                 elementType : 'labels',
  35.                                 stylers : [
  36.                                         { visibility : 'off' }
  37.                                 ]
  38.                         }
  39.                 ];
  40.                 var myOptions = {
  41.                         panControl : false,
  42.                         zoomControl : true,
  43.                         mapTypeControl : false,
  44.                         scaleControl : false,
  45.                         streetViewControl : false,
  46.                         overviewMapControl : false,
  47.                         zoom : 15,
  48.                         mapTypeId : google.maps.MapTypeId.ROADMAP,
  49.                         styles : styleArray
  50.                 };
  51.                 var map = new google.maps.Map(document.getElementById("map_canvas"),
  52.                                 myOptions);
  53.  
  54.                 if(navigator.geolocation){
  55.                         navigator.geolocation.getCurrentPosition(function(position){
  56.                                 var pos = new google.maps.LatLng(position.coords.latitude,
  57.                                                 position.coords.longitude);
  58.  
  59.                                 // MY TARGET LOCATION //
  60.                                 var image = 'images/marker2.png';
  61.                                 var whereami = new google.maps.Marker({
  62.                                         position : pos,
  63.                                         map : map,
  64.                                         icon : image
  65.                                 });
  66.                                 map.setCenter(pos);
  67.                         }, function(){
  68.                                 handleNoGeolocation(true);
  69.                         });
  70.                 }
  71.                 else{
  72.                         handleNoGeolocation(false);
  73.                 }
  74.  
  75.                 // Šeit iegūstam punktus
  76.                 var
  77.                                 points = [], // Tukšs masīvs
  78.                                 str = '0';
  79.  
  80.                 // Iegūstam datus caur ajax
  81.                 $.ajax({
  82.                         async : false, // NE-ASINHRONI! citādi kods izpildīsies talāk nesagaidot ajax atbildi!
  83.                         url : 'getcord.php',
  84.                         type : 'POST',
  85.                         dataType : 'json',
  86.                         data : { 'filter' : str},
  87.                         success : function(response){
  88.                                 // Uzstādam iegūto response kā punktus
  89.                                 points = response;
  90.                         }
  91.                 });
  92.  
  93.                 // Debugošanai:
  94.                 console.log('Pēc ajax punkti:', points);
  95.  
  96.                 // Uzliekam markerus
  97.                 setMarkers(map, points);
  98.         }
  99.  
  100.         /**
  101.          * Funkcija aizvāc visus markerus no kartes (izņemot lietotāja atrašanās markeri)
  102.          */
  103.         function clearAllMarkers(){
  104.                 // Aizvācam visus markerus
  105.                 for(var i = 0; i < markers.length; i++){
  106.                         markers[i].setMap(null);
  107.                 }
  108.                
  109.                 // Notīram markeru masīvu - uzstādam kā tukšu masīvu
  110.                 markers = [];
  111.         }
  112.  
  113.  
  114.         function setMarkers(map, locations){
  115.                 var image = new google.maps.MarkerImage('images/marker.png',
  116.                                 new google.maps.Size(40, 36),
  117.                                 new google.maps.Point(0, 0),
  118.                                 new google.maps.Point(-6, 52));
  119.                 var shadow = new google.maps.MarkerImage('images/marker_shadow.png',
  120.                                 new google.maps.Size(40, 36),
  121.                                 new google.maps.Point(0, 0),
  122.                                 new google.maps.Point(0, 32));
  123.                 var shape = {
  124.                         coord : [1, 1, 1, 20, 18, 20, 18 , 1],
  125.                         type : 'poly'
  126.                 };
  127.                 console.log(locations.length);
  128.                 for(var i = 0; i < locations.length; i++){
  129.                         var beach = locations[i];
  130.                         var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
  131.                         var marker = new google.maps.Marker({
  132.                                 position : myLatLng,
  133.                                 map : map,
  134.                                 shadow : shadow,
  135.                                 icon : image,
  136.                                 shape : shape,
  137.                                 title : beach[0],
  138.                                 animation : google.maps.Animation.DROP
  139.                         });
  140.  
  141.                         // Pievienojam konkrēto markeri kopējam markeru masīvam
  142.                         markers.push(marker);
  143.                 }
  144.         }
  145.  
  146.         function tests(){
  147.                 if(points){
  148.                         for(var i = 0; i < points.length; i++){
  149.                                 points[i].setMap(null);
  150.                         }
  151.                 }
  152.         }
  153.  
  154.         function openF(){
  155.                 google.maps.Map.prototype.clearOverlays = function(){
  156.                         console.log(beach);
  157.                         alert("aa");
  158.                         if(beach){
  159.                                 for(var i = 0; i < beach.length; i++){
  160.                                         beach[i].setMap(null);
  161.                                 }
  162.                         }
  163.                 }
  164.         }
  165.  
  166.         function showResult(str){
  167.                 if(str.length == 0){
  168.                         document.getElementById("livesearch").innerHTML = "";
  169.                         document.getElementById("livesearch").style.border = "0px";
  170.                         return;
  171.                 }
  172.                 if(window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
  173.                         xmlhttp = new XMLHttpRequest();
  174.                 }
  175.                 else{// code for IE6, IE5
  176.                         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  177.                 }
  178.                 xmlhttp.onreadystatechange = function(){
  179.                         if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
  180.                                 document.getElementById("livesearch").innerHTML = xmlhttp.responseText;
  181.                                 document.getElementById("livesearch").style.border = "1px solid #A5ACB2";
  182.                         }
  183.                 }
  184.                 xmlhttp.open("GET", "getprofesion.php?q=" + str, true);
  185.                 xmlhttp.send();
  186.         }
  187.  
  188. </script>
  189. <script src="js/jquery-1.7.2.js"></script>
  190. <script src="ui/jquery.effects.core.js"></script>
  191. <script src="ui/jquery.effects.fold.js"></script>
  192.  
  193. <script>
  194.         $(document).ready(function(){
  195.  
  196.                 $("#show").click(function(){
  197.                         $(".filters_down").show("fold",
  198.                                         {
  199.                                                 horizFirst : false,
  200.                                                 size : 28
  201.                                         }, 2500);
  202.                 });
  203.  
  204.                 $("#hide").click(function(){
  205.                         $(".filters_down").hide("fold",
  206.                                         {
  207.                                                 horizFirst : false,
  208.                                                 size : 28
  209.                                         }, 1500);
  210.                 });
  211.         });
  212.  
  213. </script>
  214.  
  215.  
  216. </head>
  217.  
  218.  
  219. <body onload="initialize()">
  220. <!--  header content -->
  221. <div class="header">
  222.         <div id="logo"></div>
  223.         <div class="top_menu">
  224.                 <!-- home icon -->
  225.                 <div id="home"></div>
  226.                 <ul>
  227.                         <li><a href="#" id="cur">Find a job near you</a></li>
  228.                         <li><a href="#">Seek for an emplyee </a></li>
  229.                 </ul>
  230.         </div>
  231.         <!--  end of top_menu-->
  232.         <div class="support">
  233.                 <p id="supporters">
  234.  
  235.                 <h3>Supporters</h3></p>
  236.                 <ul>
  237.                         <li><img src="images/Untitled-1_08.gif" alt="Untitled-1_08" width="" height=""/></li>
  238.                         <li><img src="images/Untitled-1_09.jpg" alt="Untitled-1_09" width="" height=""/></li>
  239.                         <li><img src="images/Untitled-1_10.jpg" alt="Untitled-1_10" width="" height=""/></li>
  240.                 </ul>
  241.         </div>
  242. </div>
  243. <div class="filters">
  244.         <a id="show"><h4 id="filter_title" id="show">Search a profession</h4>
  245.                 <img src="images/showhide.png" alt="show hide" width="" height=""/></a>
  246. </div>
  247. <div class="filters_down">
  248.         <a id="hide"><img src="images/showhide.png" alt="show hide" width="" height=""/></a>
  249.         <h4>What profession you'r interested in?</h4><br>
  250.         <input type="text" id="squery" onchange="showResult(this.value)">
  251.         <br>
  252.         <br>
  253.  
  254.         <div id="livesearch"></div>
  255. </div>
  256. <div id="map_canvas"></div>
  257.  
  258. </body>
  259. </html>
create a new version of this paste RAW Paste Data