JQuery autocomplete while reading from mySQL

JQuery autocomplete while reading from mySQL

Hey guys,
I've attempting to display a bunch of markers on google maps (read from mySQL database) while allowing the user to search their address. The idea is that the map will zero in on their search, with markers displaying nearby.

I can get the markers displaying. I can get the search happening. I just can't get them working together. I've done a lot of research and experimenting to no avail. Below is the code for my closest attempt. Would appreciate any advice or hints. Thanks in advance!

  2. <!DOCTYPE html >
  3.   <head>
  4.     <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  5.     <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
  6.     <title>PHP/MySQL & Google Maps Example</title>
  7.     <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> 
  8.     <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
  9.     <script type="text/javascript" src="js/gmap3.min.js"></script>
  10.     <script type="text/javascript" src="js/jquery-autocomplete.min.js"></script>
  11.     <link rel="stylesheet" type="text/css" href="css/jquery-autocomplete.css"/>
  12.     <script type="text/javascript">
  13.     //<![CDATA[

  15.     function load() {
  16.       var map = new google.maps.Map(document.getElementById("map"), {
  17.         center: new google.maps.LatLng(-33.866584707354, 151.2188931196655),
  18.         zoom: 8,
  19.         mapTypeId: 'roadmap'
  20.       });
  21.       var infoWindow = new google.maps.InfoWindow;

  23.       // read from database
  24.       downloadUrl("genxml.php", function(data) {
  25.         var xml = data.responseXML;
  26.         var markers = xml.documentElement.getElementsByTagName("marker");
  27.         for (var i = 0; i < markers.length; i++) {
  28.           var name = markers[i].getAttribute("name");
  29.           var address = markers[i].getAttribute("address");
  30.           var type = markers[i].getAttribute("type");
  31.           var point = new google.maps.LatLng(
  32.               parseFloat(markers[i].getAttribute("lat")),
  33.               parseFloat(markers[i].getAttribute("lng")));
  34.           var html = "<b>" + name + "</b> <br/>" + address;
  35.           var icon = customIcons[type] || {};
  36.           var marker = new google.maps.Marker({
  37.             map: map,
  38.             position: point,
  39.             icon: icon.icon,
  40.             shadow: icon.shadow
  41.           });
  42.           bindInfoWindow(marker, map, infoWindow, html);
  43.         }
  44.       });
  45.     }

  47.     function bindInfoWindow(marker, map, infoWindow, html) {
  48.       google.maps.event.addListener(marker, 'click', function() {
  49.         infoWindow.setContent(html);
  50.         infoWindow.open(map, marker);
  51.       });
  52.     }

  54.     function downloadUrl(url, callback) {
  55.       var request = window.ActiveXObject ?
  56.           new ActiveXObject('Microsoft.XMLHTTP') :
  57.           new XMLHttpRequest;

  59.       request.onreadystatechange = function() {
  60.         if (request.readyState == 4) {
  61.           request.onreadystatechange = doNothing;
  62.           callback(request, request.status);
  63.         }
  64.       };
  65.       request.open('GET', url, true);
  66.       request.send(null);
  67.     }

  69.     function doNothing() {}
  70.   </script>
  71.   </head>

  73.   <body>
  74.    <input type="text" id="address" size="60"><br/><br/>
  75. <div id="map" style="width: 800px; height: 600px;"></div>

  77. <script type="text/javascript">
  78. $(document).ready(function() {
  79.   $('#map').gmap3();
  80.           $('#address').autocomplete({
  81.             source: function() {
  82.               $("#map").gmap3({
  83.                 action:'getAddress',
  84.                 address: $(this).val(),
  85.                 callback:function(results){
  86.                   if (!results) return;
  87.                   $('#address').autocomplete(
  88.                     'display', 
  89.                     results,
  90.                     false
  91.                   );
  92.                 }
  93.               });
  94.             },
  95.             cb:{
  96.               cast: function(item){
  97.                 return item.formatted_address;
  98.               },
  99.               select: function(item) {
  100.                 $("#map").gmap3(
  101.                   {action:'', name:'marker'},
  102.                   {action:'addMarker',
  103.                   latLng:item.geometry.location,
  104.                     map:{center:true, zoom:8}
  105.                   }
  106.                 );
  107.               }
  108.             }
  109.           })
  110.           .focus();
  111. });
  112. </script>
  113. <script type="text/javascript"> window.onload=function(){ load(); }</script>
  114.   </body>

  116. </html>