#1
  1. A Change of Season
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    2,672
    Rep Power
    171

    Google map with Php Mysql and Jquery slider


    Hi;

    I use Php, Mysql and Xml and generate a map based on the database results like this.

    As you can see I also have a slider on the right side of the page that filters the results based on the price range.

    Now I want to learn how connect that slider to the map so when they filter the price the map also filters the results. This is an example of such functionality.

    Can anyone help me find the exact page documentation or help me find a resource to do that?

    Thank you.
  2. #2
  3. Mad Scientist
    Devshed Expert (3500 - 3999 posts)

    Join Date
    Oct 2007
    Location
    North Yorkshire, UK
    Posts
    3,661
    Rep Power
    4123
    Without looking in too much depth... this is what i would do/look for:

    Look at how you build your map markers onload

    Just use the same functionality.

    The site you cite appears to bind to the mouseup event on the slider, thus reducing load and, I expect, reloads the entire dataset using ajax..and redrawing the map
    I said I didn't like ORM!!! <?php $this->model->update($this->request->resources[0])->set($this->request->getData())->getData('count'); ?>

    PDO vs mysql_* functions: Find a Migration Guide Here

    [ Xeneco - T'interweb Development ] - [ Are you a Help Vampire? ] - [ Read The manual! ] - [ W3 methods - GET, POST, etc ] - [ Web Design Hell ]
  4. #3
  5. A Change of Season
    Devshed Frequenter (2500 - 2999 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    2,672
    Rep Power
    171
    Originally Posted by Northie
    Without looking in too much depth... this is what i would do/look for:

    Look at how you build your map markers onload

    Just use the same functionality.

    The site you cite appears to bind to the mouseup event on the slider, thus reducing load and, I expect, reloads the entire dataset using ajax..and redrawing the map
    I see. I need to find a way to send the values with jquery to the map but I dont want the whole map to refresh. I just want the pins to come and go. Anyways I do it this way:
    Code:
    <iframe src="map.php?country_id=<?php echo $search_id;?>"></iframe>
    Code:
    <?php
    	include "/home/h2g/includes/myconnections.php"; 
    ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head><base target="_parent" />
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <title>Google Maps AJAX + MySQL/PHP Example</title>
        <?php
    		$country_id = $_GET['country_id'];
    		$googlemap_countrys= new mysql($host, $user, $pass, $db);
    		$googlemap_countrys->connect();
    		$googlemap_countrys->select();
    		$q_googlemap = " SELECT * FROM googlemap_country WHERE country_id = '".$_GET['country_id']."'";
    		$googlemap_countrys->query($q_googlemap);
    		if($googlemap_countrys->numRows()==0)
    			{
    				?>Map is not available for the selected area!<?php	
    			}
    		$googlemap_countrys_res=$googlemap_countrys->fetchObject();
    		$lat = $googlemap_countrys_res->lat;
    		$lng = $googlemap_countrys_res->lng;
    		$zoom  = $googlemap_countrys_res->zoom; 
    		
    	?>
       
        <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAK377zMmbZDTTCSg7AuVGRBQAQxudVK9YJlYUWXaiduDCdA6HlBQNQxLl7vfU0rz0RX03RMPw0Fu8NA"
                type="text/javascript"></script>
    
        <script type="text/javascript">
        //<![CDATA[
    	
        var iconBlue = new GIcon(); 
        iconBlue.image = 'http://site.com/pin2_blue.png';
        iconBlue.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
        iconBlue.iconSize = new GSize(32, 37);
        iconBlue.shadowSize = new GSize(22, 20);
        iconBlue.iconAnchor = new GPoint(6, 20);
        iconBlue.infoWindowAnchor = new GPoint(5, 1);
        var country_id = "<?php echo $country_id;?>"; 
        var iconRed = new GIcon(); 
        iconRed.image = 'http://site.com/pin2.png';
        iconRed.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
        iconRed.iconSize = new GSize(32, 37);
        iconRed.shadowSize = new GSize(22, 20);
        iconRed.iconAnchor = new GPoint(6, 20);
        iconRed.infoWindowAnchor = new GPoint(5, 1);
        var country_id = "<?php echo $country_id;?>"; 
        var customIcons = [];
    	var country_id = "<?php echo $country_id;?>"; 
        customIcons["restaurant"] = iconBlue;
        customIcons["bar"] = iconRed;
    
        function load() {
          if (GBrowserIsCompatible()) {
            var map = new GMap2(document.getElementById("map"),{size:new GSize(980,400)});
            map.addControl(new GSmallMapControl());
            map.addControl(new GMapTypeControl());
            map.setCenter(new GLatLng(<?php echo $lat;?>, <?php echo $lng;?>), <?php echo $zoom;?>);
    	    var country_id = "<?php echo $country_id;?>"; 
            GDownloadUrl("country_map_xml.php?country_id=" + <?php echo $country_id;?>,
    	
              function(data) { 
              var country_id = "<?php echo $country_id;?>"; 
    		  var xml = GXml.parse(data);
              var markers = xml.documentElement.getElementsByTagName("marker");
              for (var i = 0; i < markers.length; i++) {
                var name = markers[i].getAttribute("hotelname");
                var address = markers[i].getAttribute("address");
    			var accomodationtype = markers[i].getAttribute("accomodationtype");
    			//var quickdesc = markers[i].getAttribute("quickdesc");
    			var startype = markers[i].getAttribute("startype");
    			var low = markers[i].getAttribute("low");
    			var photo = markers[i].getAttribute("photo");
                var star_photo = markers[i].getAttribute("star_photo");
    			var postcode = markers[i].getAttribute("postcode");
    			var page_link = markers[i].getAttribute("page_link");
    			var type = markers[i].getAttribute("type");
    			var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")));
                var marker = createMarker(point, name, address, type, postcode, page_link,accomodationtype, startype,low, photo,star_photo);
                map.addOverlay(marker);
              }
            });
          }
        }
    
        function createMarker(point, name, address, type, postcode, page_link,accomodationtype, startype,low,photo,star_photo) {
          var marker = new GMarker(point, customIcons[type]);
          var html = "<div style = 'Font-family:Arial; font-size:12px; width:200px;'><b><img style = ' float:left; border:1px solid #008FC3; margin-right:5px;' src =" + photo + " ><a style = 'color:#008FC3; text-decoration:none' href= " + page_link + " target='_parent'>" + name + "</a></b> <br/><span style ='font-size:10px;'>" + address + "</b> <br/>" + "<img src =" + star_photo + " ></b> <div><span style = 'color:#008FC3; font-size:18px; margin-bottom:5px;'>" + low + "</span></span></div></div></div>";
          GEvent.addListener(marker, 'click', function() {
            marker.openInfoWindowHtml(html);
          });
          return marker;
        }
        //]]>
      </script>
    
      </head>
    
      <body onload="load()" onunload="GUnload()" style="margin:0; padding:0;">
        <div id="map" style="overflow:hidden; width: 950px; height: 400px; margin:0 auto; padding:0; border:1px solid #cccccc;"></div>
      </body> 
    </html>
    PHP Code:
    <?php
    include "/home/h2g/includes/myconnections.php"
    ?>
    <?php
    //require("phpsqlajax_dbinfo.php");
    //include "includes/connections.php";
    function parseToXML($htmlStr

    $xmlStr=str_replace('<','&lt;',$htmlStr); 
    $xmlStr=str_replace('>','&gt;',$xmlStr); 
    $xmlStr=str_replace('"','&quot;',$xmlStr); 
    $xmlStr=str_replace("'",''',$xmlStr); 
    $xmlStr=str_replace("&",'
    &amp;',$xmlStr); 
    return $xmlStr; 


    // Opens a connection to a MySQL server
    $connection=mysql_connect ($host, $user, $pass);
    //$connection=mysql_connect ('
    localhost', 'a', 'a');
    if (!$connection) {
      die('
    Not connected ' . mysql_error());
    }
    // Set the active MySQL database
    $db_selected = mysql_select_db($db, $connection);
    if (!$db_selected) {
      die ('
    Can\'t use db : ' mysql_error());
    }

    // Select all the rows in the markers table

            
    $query "SELECT * FROM hotels, hotelrooms WHERE hotels.hotel_id = hotelrooms.hotel_id AND 
                      lat != '-' AND lng != '-' AND hotels.status = 'active' AND hotelrooms.status = 'active'
                      AND country_id = '"
    .$_REQUEST['country_id']."' GROUP BY hotels.hotel_id";    
        



    $result mysql_query($query);
    if (!
    $result) {
      die(
    'Invalid query: ' mysql_error());
    }

    header("Content-type: text/xml");

    // Start XML file, echo parent node
    echo '<markers>';

    // Iterate through the rows, printing XML nodes for each
    $counter 0;
    while (
    $row = @mysql_fetch_assoc($result))
    {
      
      
      
    //Get package details
      
    $package_query "SELECT * FROM packages WHERE room_id = '".$row['room_id']."' ORDER BY low";
      
    $package_result mysql_query($package_query);
      
    $package_row = @mysql_fetch_assoc($package_result);
      if(
    $package_row['low']>0)
              {
                
    $low " From $".$package_row['low']." ";    
            }
       else
               {
                
    $low "";        
            }
      
      
    //
      
    $photo_query "SELECT * FROM hotel_photos WHERE hotel_id = '".$row['hotel_id']."'";
      
    $photo_result mysql_query($photo_query);
      
    $photo_row = @mysql_fetch_assoc($photo_result);
      
      
    $photo "http://www.site.com/hotel_photos/hid_".$row['hotel_id']."/thumbnail/".$photo_row['photo'].".jpg width=50 height=50";
              
       if(
    $_GET['hotel_id']==$row['hotel_id'])
        {
            echo 
    'type="restaurant" ';
        }
     else
         {
             echo 
    'type="bar" ';    
        }
      
      
    //Stars image  
    if($row['startype']==1)
          {
            
    $star_photo "http://www.site.com/images/googlemapstars/one.jpg";    
        }
    if(
    $row['startype']=="1 1/2" )
          {
            
    $star_photo "http://www.site.com/images/googlemapstars/one_and_half.jpg";    
        }
    if(
    $row['startype']==)
          {
            
    $star_photo "http://www.site.com/images/googlemapstars/two.jpg";    
        }
    if(
    $row['startype']=="2 1/2" )
          {
            
    $star_photo "http://www.site.com/images/googlemapstars/two_and_half.jpg";    
        }
    if(
    $row['startype']==)
          {
            
    $star_photo "http://www.site.com/images/googlemapstars/three.jpg";    
        }

    if(
    $row['startype']=="3 1/2" )
          {
            
    $star_photo "http://www.site.com/images/googlemapstars/three_and_half.jpg";    
        }

    if(
    $row['startype']==)
          {
            
    $star_photo "http://www.site.com/images/googlemapstars/four.jpg";    
        }

    if(
    $row['startype']=="4 1/2" )
          {
            
    $star_photo "http://www.site.com/images/googlemapstars/four_and_half.jpg";    
        }

    if(
    $row['startype']==)
          {
            
    $star_photo "http://www.site.com/images/googlemapstars/five.jpg";    
        }

    if(
    $row['startype']=="5 1/2" )
          {
            
    $star_photo "http://www.site.com/images/googlemapstars/five_and_half.jpg";    
        }
    if(
    $row['startype']==)
          {
            
    $star_photo "http://www.site.com/images/googlemapstars/six.jpg";    
        }
    //Stars image

      
    $row['startype'] = str_replace(" 1/2"".5"$row['startype']);
      
    $row['startype'] = str_replace(" 1/2"".5"$row['startype']);
      
    $row['quickdesc'] = substr($row['quickdesc'],0,200);


      
    // ADD TO XML DOCUMENT NODE
      
    echo '<marker ';
      echo 
    'photo="' parseToXML($photo) . '" ';
      echo 
    'star_photo="' parseToXML($star_photo) . '" ';
      echo 
    'startype="' parseToXML($row['startype']) . '" ';
      echo 
    'low="' parseToXML($low) . '" ';
      echo 
    'hotelname="' parseToXML($row['hotelname']) . '" ';
      echo 
    'accomodationtype="' parseToXML($row['accomodationtype']) .'" ';
     
    // echo 'quickdesc="' . parseToXML($row['quickdesc']) .'" ';
      
    echo 'address="' parseToXML($row['googlemap']) .'" ';
      echo 
    'postcode="' parseToXML($row['postcode']) . '" ';
      echo 
    'page_link="http://www.site.com/detail.php?hid='.$row['hotel_id'].'&amp;rid='.$row['room_id'].'&amp;nights=1&amp;checkin='.date('Y-m-d').'&amp;adults=2&amp;children=0" ';
      echo 
    'lat="' $row['lat'] . '" ';
      echo 
    'lng="' $row['lng'] . '" ';
     
      
      if(
    $_GET['hotel_id']==$row['hotel_id'])
        {
            echo 
    'type="restaurant" ';
        }
     else
         {
             echo 
    'type="bar" ';    
        }
        
      
      echo 
    '/>';
    }

    // End XML file
    echo '</markers>';
    site.com

IMN logo majestic logo threadwatch logo seochat tools logo