title: Google map search interfering with mySQL
body: <p>I'm having an issue displaying markers from my database while allowing the user to search their address (search is an autocomplete). I can either display the markers or complete a search, however I'd like to do both.</p>
  
  <p>From all the testing I've done, I'm thinking there may be some conflict with my JavaScripts? Not entirely sure though. Could you guys have a look? Any help is much appreciated!
  Thanks in advance, code is below.</p>
  
  <pre><code>&lt;!DOCTYPE html &gt;
    &lt;head&gt;
  
  &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no" /&gt;
  &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"/&gt;
  &lt;title&gt;PHP/MySQL &amp; Google Maps Example&lt;/title&gt;
  &lt;script type="text/javascript" src="js/auto.js"&gt; &lt;/script&gt;
  &lt;script type="text/javascript" src="js/jquery-1.7.1.min.js"&gt;&lt;/script&gt;
  
  &lt;script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript" src="js/gmap3.min.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript" src="js/jquery-autocomplete.min.js"&gt;&lt;/script&gt;
  
  
  &lt;link rel="stylesheet" type="text/css" href="css/jquery-autocomplete.css"/&gt;
  &lt;script type="text/javascript"&gt;
  //&lt;![CDATA[
  
  var customIcons = {
    restaurant: {
      icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
      shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
    },
    bar: {
      icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
      shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
    }
  };
  
  function load() {
    var map = new google.maps.Map(document.getElementById("map"), {
      center: new google.maps.LatLng(-33.866584707354, 151.2188931196655),
      zoom: 8,
      mapTypeId: 'roadmap'
    });
    var infoWindow = new google.maps.InfoWindow;
  
    // Change this depending on the name of your PHP file
    downloadUrl("genxml.php", function(data) {
      var xml = data.responseXML;
      var markers = xml.documentElement.getElementsByTagName("marker");
      for (var i = 0; i &lt; markers.length; i++) {
        var name = markers[i].getAttribute("name");
        var address = markers[i].getAttribute("address");
        var type = markers[i].getAttribute("type");
        var point = new google.maps.LatLng(
            parseFloat(markers[i].getAttribute("lat")),
            parseFloat(markers[i].getAttribute("lng")));
        var html = "&lt;b&gt;" + name + "&lt;/b&gt; &lt;br/&gt;" + address;
        var icon = customIcons[type] || {};
        var marker = new google.maps.Marker({
          map: map,
          position: point,
          icon: icon.icon,
          shadow: icon.shadow
        });
        bindInfoWindow(marker, map, infoWindow, html);
      }
    });
  }
  
  function bindInfoWindow(marker, map, infoWindow, html) {
    google.maps.event.addListener(marker, 'click', function() {
      infoWindow.setContent(html);
      infoWindow.open(map, marker);
    });
  }
  
  function downloadUrl(url, callback) {
    var request = window.ActiveXObject ?
        new ActiveXObject('Microsoft.XMLHTTP') :
        new XMLHttpRequest;
  
    request.onreadystatechange = function() {
      if (request.readyState == 4) {
        request.onreadystatechange = doNothing;
        callback(request, request.status);
      }
    };
  
    request.open('GET', url, true);
    request.send(null);
  }
  
  function doNothing() {}
  
  //]]&gt;
  &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;input type="text" id="address" size="60"&gt;&lt;br/&gt;&lt;br/&gt;
  
  &lt;div id="map" style="width: 800px; height: 600px;"&gt;&lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
  $(document).ready(function() {
      load(); 
  });
  
  $(function(){
                $('#map').gmap3();
  
        $('#address').autocomplete({
          source: function() {
            $("#map").gmap3({
              action:'getAddress',
              address: $(this).val(),
              callback:function(results){
                if (!results) return;
                $('#address').autocomplete(
                  'display', 
                  results,
                  false
                );
              }
            });
          },
          cb:{
            cast: function(item){
              return item.formatted_address;
            },
            select: function(item) {
              $("#map").gmap3(
                {action:'', name:'marker'},
                {action:'addMarker',
                latLng:item.geometry.location,
                  map:{center:true, zoom:8}
                }
              );
            }
          }
        })
        .focus();
  });
  
  &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>