javascript - Major problems with Google maps after jQuery UI autocomplete is added to project -

i have run major problems on google maps project when integrated auto complete box , changed code google maps script have been working on. map supposed communicate database , mark cities have listings in them. when click on city zooms in , marks listings on map. ever since got auto complete box work messed around map script , markers no longer showing up. on top of cannot log in console through map script map styles , map still appear. can help?

//buyersmap.js  function initialize() {  var cities = []; var counties = []; var states = []; var zipcodes = [];  console.log("initialize"); var lat = 38.907097; var lng = -77.094389; var markers = []; var infowindow = new google.maps.infowindow();  geocoder = new google.maps.geocoder();  var styles = [   {     "elementtype": "geometry",     "stylers": [       { "lightness": 44 },       { "visibility": "simplified" }     ]   },{     "elementtype": "labels",     "stylers": [       { "lightness": 25 }     ]   },{     "featuretype": "road.arterial",     "elementtype": "labels",     "stylers": [       { "visibility": "off" }     ]   },{     "featuretype": "administrative.province",     "elementtype": "geometry.stroke",     "stylers": [       { "color": "#808080" },       { "visibility": "on" },       { "weight": 2.9 },       { "lightness": -27 }     ]   },{     "featuretype": "poi",     "stylers": [       { "visibility": "off" }     ]   },{     "featuretype": "administrative.locality",     "stylers": [       { "visibility": "on" }     ]   },{     "featuretype": "road.arterial",     "elementtype": "geometry.stroke",     "stylers": [       { "visibility": "on" },       { "saturation": -27 },       { "lightness": -21 },       { "gamma": 1.63 }     ]   },{     "featuretype": "administrative",     "elementtype": "labels",     "stylers": [       { "visibility": "on" },       { "hue": "#ff8000" },       { "lightness": -19 },       { "gamma": 0.82 }     ]   },{   } ];  var styledmap = new google.maps.styledmaptype(styles, {name: 'styled map'}); console.log("map styled"); var mapoptions = {     center: new google.maps.latlng(lat, lng),     zoom: 10,     disabledefaultui: true,     maptypecontroloptions: {         maptypeids: [google.maps.maptypeid.roadmap, 'map_style']     } };  var map = new google.maps.map(document.getelementbyid('map-canvas'), mapoptions);  map.maptypes.set('map_style', styledmap); map.setmaptypeid('map_style');  console.log("map set");  $.ajaxsetup({async:false}); console.log("async off"); $.post("./listingdata.php", {func: "size"}, function(data){     numlistings = parseint(data);     console.log("data: "+data); }); console.log("start markers"); markcities();  google.maps.event.addlistener(autocomplete, 'place_changed', function() {         var place = autocomplete.getplace();         if (!place.geometry) {             return;         }         else{             map.setzoom(13);             map.setcenter(this.position);             for(var k = 0; k < markers.length; k++){                 markers[k].setmap(null);             }         }     // if place has geometry, present on map.     if (place.geometry.viewport) {         map.fitbounds(place.geometry.viewport);     } else {     map.setcenter(place.geometry.location);     } });  function markcities(){     var coords_obj;     var coordinates;     for(var = 0; < numlistings; i++){         cities.push(getdb("city",i));         states.push(getdb("state",i));         address = getdb("city", i)+", "+getdb("state", i);         geocoder.geocode({address: address}, function(results, status){             coordinates = results[0].geometry.location;             var image = new google.maps.markerimage(                 './maps/logo-marker.png',                 new google.maps.size(44,64),                 new google.maps.point(0,0),                 new google.maps.point(0,-9)             );              var marker = new google.maps.marker({                 position: coordinates,                 map: map,                 icon: './maps/logo-marker.png',                  id:             });              google.maps.event.addlistener(marker, 'click', function() {                     map.setzoom(13);                     map.setcenter(this.position);                     for(var k = 0; k < markers.length; k++){                         markers[k].setmap(null);                     }                     marklistings();             });              markers.push(marker);         });     }    }  function marklistings(){      for(var = 0; < numlistings; i++){          lat = getdb('lat', i);         lng = getdb('lng', i);          if(!isnan(lng)){             var image = new google.maps.markerimage(                 './maps/orange-marker.png',                 new google.maps.size(22,32),                 new google.maps.point(0,0),                 new google.maps.point(0,0)             );              var marker = new google.maps.marker({                 position: new google.maps.latlng(lat, lng),                 icon: './maps/logo-marker.png',                 map: map,                 id: i,             });              google.maps.event.addlistener(marker, 'click', function() {                  var defaultpic = "../sell/userdata/listingpics/"+getdb('defaultpic', this.id);                  var template =                 '<div class="containter" style="height: 100%; width:400px;">'+                     '<div class="infobox-header" style="margin: 2px; border-bottom: 1px solid #e6e6e6;">'+                         '<strong><h4>'+getdb('name', this.id)+'</h4></strong></div>'+                     '<div class="infobox-content" style="margin: 2px; width: 390px; padding: 5px; display:inline-block">'+                         '<div class="info-lt-content" style="width: 50%; padding: 5px; display:inline-block">'+                             '<img src ='+defaultpic+' onerror ="imgerror(this);" height = 100% width = 100%></a>'+                         '</div>'+                         '<div class="info-rt-content" style="width: 50%; height:100% padding: 5px; display:inline-block">'+                             '<b>asking price:</b> '+getdb('price', this.id)+'<br>'+                             '<b>sqft:</b> '+getdb('sqft', this.id)+'<br>'+                             '<b>beds:</b> '+getdb('bedrooms', this.id)+'<br>'+                             '<b>baths:</b> '+getdb('bathrooms', this.id)+'<br>'+                         '</div>'+                     '</div>'+                     '<div class="infobox-footer" style="margin: 5px; padding: 10px;border-top: 1px solid #e6e6e6;">'+                         '<a href = "../property_info/index.php?id='+(this.id+96)+'"><button type="button" class="btn btn-warning">view full listing</button></a>'+                     '</div>'+                 '</div>';                  infowindow.setcontent(template);                 infowindow.open(map, this);                 });                 markers.push(marker);             }     } } function getdb(val, id){     console.log("getdb");     var r;     $.post("../serverscripts/listingdata.php", {func: 'get', val: val, id: id+96}, function(data){             r = data;         });     return r; } }  google.maps.event.adddomlistener(window, 'load', initialize); 

index

<?php ob_start(); session_start();   ?>  <!doctype html>  <head><meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta charset="utf-8">  <!-- page title --> <title>urbanare -- property info</title>  <meta name="keywords" content="real estate, responsive, retina ready, modern html5 template, bootstrap, css3"> <meta name="description" content="cozy - responsive real estate html5 template"> <meta name="author" content="wisely themes - www.wiselythemes.com"> <meta http-equiv="content-type" content="text/html; charset=latin1_swedish_ci"> <!-- mobile meta tag --> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">  <!-- fav , touch icons --> <link rel="shortcut icon" href="http://www.urbanare.com/wp-content/themes/sps/images/fav.ico"> <link rel="apple-touch-icon" href="http://comingsoon.safepropserv.com/landing/images/fav_touch_icons/apple-touch-icon.png"> <link rel="apple-touch-icon" sizes="72x72" href="http://comingsoon.safepropserv.com/landing/images/fav_touch_icons/apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="114x114" href="http://comingsoon.safepropserv.com/landing/images/fav_touch_icons/apple-touch-icon-114x114.png">  <!-- ie6-8 support of html5 elements --> <!--[if lt ie 9]>   <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>  <![endif]-->  <!-- google web font --> <link href="../sell/js/css" rel="stylesheet" type="text/css">  <!-- bootstrap css --> <link href="http://comingsoon.safepropserv.com/landing/css/bootstrap.min.css" rel="stylesheet">  <!-- template css <link href="css/style.css" rel="stylesheet" /> -->  <!-- less template --> <link rel="stylesheet/less" type="text/css" href="../sell/js/style.less">   <script>     less = {         env: "development",         async: false,         fileasync: false,         poll: 1000,         functions: {},         dumplinenumbers: "comments",         relativeurls: false     }; </script> <script src="../libs/less-1.7.0.min.js"></script>  <!-- modernizr --> <script src="../libs/modernizr-2.8.1.min.js"></script> <script src="../libs/modernizr-2.8.1.min.js"></script>  <!--jquery/ajax-->  <!--google maps api--> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=aizasychvli_wvtpsknjpcpn-pkysy5zwcb4k8m"></script>  <!--page layout--> <style type="text/css" id="less:landing-css-style" src="./css/layout.css"></style>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>  <!-- jquery ui --> <link rel="stylesheet" href="./jquery-ui.css"> <script src="./jquery-ui.js"></script>  <!--load map--> <script style="text/css" src="./maps/buyersmap.js"></script>   <script> $(function() {   console.log("test.");     var availabletags = [       "gaithersburg, md",       "rockville, md",       "upper marlboro, md",       "arlington, va",       "mclean, va",       "aldie, va"      ];     $( "#tags" ).autocomplete({       source: availabletags     });   }); </script>  <!--map layout--> <style type="text/css"> #map-canvas { height: 600px; width: 100%;}   #text-box {margin-top:20px;}   .controls {         margin-top:16px;         margin-right: 0px;         text-align: center;         border: 1px solid #ccc;         border-radius: 2px 0 0 2px;         box-sizing: border-box;         -moz-box-sizing: border-box;         height: 32px;         width: 80%;         outline: none;         }        #pac-input {         background-color: #fff;         font-family: roboto;         font-size: 15px;         font-weight: 300;         margin-left: 12px;         padding: 0 11px 0 13px;         text-overflow: ellipsis;         width: 400px;       }        #pac-input:focus {         border-color: #4d90fe;       }        .pac-container {         font-family: roboto;       }        #type-selector {         color: #fff;         background-color: #4d90fe;         padding: 5px 11px 0px 11px;       }        #type-selector label {         font-family: roboto;         font-size: 13px;         font-weight: 300;       }       #filters {         border: solid 1px #999;        }       #search {           margin-top: 4px;       }  </style> </head>  <body> <!-- begin wrapper --> <div id="wrapper">      <!--import header-->     <?php include "../header/header.php"; ?>      <!-- begin content wrapper -->     <div class="content">             <div class="row">                 <div class = "well" style="text-align: center;">                     <div class="ui-widget">                         <input id="tags">                     </div>                 </div>                 <!--map-->                 <div class="col-sm-12" style="">                     <div id="map-canvas"></div>                      </div>              </div>       </div> </div> <!-- end content wrapper -->     <?php include("../footer/footer.php");?> </div> <!-- end wrapper -->   <!-- libs --> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=aizasychvli_wvtpsknjpcpn-pkysy5zwcb4k8m"></script> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places"></script> 

list data

<?php session_start(); $db = mysql_connect("localhost:3306", "un", "pw*") or die(mysql_error); mysql_select_db('urbanas8_db', $db) or die(mysql_error());  $func = $_post['func'];  //retrieves data if($func=="get"){      $id = $_post['id'];     $val = $_post['val'];     $query = mysql_query("select * properties id='$id'") or die(mysql_error);     $rows = mysql_fetch_assoc($query);      if($val=="lat"){         echo $rows['lat'];     }      else if($val=="lng") {         echo $rows['lng'];     }     else if($val=="name") {         echo $rows['property_name'];     }     else if($val=="seller") {         echo $rows['seller_email'];     }     else if($val=="price") {         echo $rows['list_price'];     }     else if($val=="fees") {         echo $rows['maintanence_fees'];     }     else if($val=="streetaddress") {         echo $rows['street_address'];     }     else if($val=="city") {         echo $rows['city'];     }     else if ($val=="state") {         echo $rows['state'];     }     else if ($val=="zip") {         echo $rows['zip'];     }     else if ($val=="county") {         echo $rows['county'];     }     else if ($val=="sqft") {         echo $rows['square_feet'];     }     else if ($val=="yearbuilt") {         echo $rows['year_built'];     }     else if ($val=="propertytype") {         echo $rows['property_type'];     }     else if ($val=="bedrooms") {         echo $rows['bedrooms'];     }     else if ($val=="bathrooms") {         echo $rows['bathrooms'];     }     else if ($val=="parkingtype") {         echo $rows['parking_type'];     }     else if ($val=="description") {         echo $rows['description'];     }     else if ($val=="datelisted") {         echo $rows['date_listed'];     }     else if($val=="defaultpic"){         echo $rows['default_pic'];     }     else {         echo "(listingdata.php 'get') invalid value.";     } }  //add listing else if($func=="new"){       $a = $_post['property_name'];     $b = $_session['user_email'];     $c = $_post['list_price'];     $cc = $_post['maintanence_fees'];     $d = $_post['street_address'];     $e = $_post['city'];     $f = $_post['state'];     $g = $_post['zip'];     $h = $_post['county'];     $i = $_post['square_feet'];     $j = $_post['year_build'];     $k = $_post['property_type'];     $l = $_post['bedrooms'];     $m = $_post['bathrooms'];     $n = $_post['parking_type'];     $o = urlencode($_post['description']);     $p = date("y-m-d");     $q = "defaultpic.jpg";     $r = $_post['lat'];     $s = $_post['lng'];      $query = mysql_query("insert properties values('', '$a', '$b', '$c', '$cc', '$d', '$e', '$f', '$g', '$h', '$i', '$j', '$k', '$l', '$m', '$n', '$o', '$p', '$q', '$r', '$s')") or die(mysql_error());      $_session['edit_listing'] = mysql_insert_id();     echo $_session['edit_listing'];     header("location: ./upload.php"); }   //number of listings else if($func=="size"){     $query = mysql_query("select * properties"));     $rows = mysql_num_rows($query);     echo("test: " + $rows); }   ?>