Google Maps Place Search

<!DOCTYPE html>
<html>
<!-- w.i.p -->
  <head>
  <script data-require="jquery@2.0.3" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <link data-require="jqueryui@1.10.0" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
    <script data-require="jqueryui@1.10.0" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
    
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&libraries=places"></script>
    
    <link rel="stylesheet" href="style.css" />
    <script src="script.js" type="text/javascript"></script>
  </head>

  <body>
    <div id="panel">
      <input id="target" type="text" placeholder="Search Box" />
    </div>
    <div id="map-canvas"></div>
    <div id="dialog" title="Results">
    <ul id="places">
      
    </ul>
    </div>
  </body>

</html>

$(document).ready(function(){
  
  
  
  
  
  
  });

function initialize() {
  
  $("#dialog").dialog();
  

  var map = new google.maps.Map(document.getElementById('map-canvas'), {
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  var defaultBounds = new google.maps.LatLngBounds(
      new google.maps.LatLng(-33.8902, 151.1759),
      new google.maps.LatLng(-33.8474, 151.2631));
  map.fitBounds(defaultBounds);

  var input = /** @type {HTMLInputElement} */(document.getElementById('target'));
  var searchBox = new google.maps.places.SearchBox(input);
  var markers = [];

  google.maps.event.addListener(searchBox, 'places_changed', function() {
    
      var infowindow = new google.maps.InfoWindow();
    $("#places").html('');
    var places = searchBox.getPlaces();

    for (var i = 0, marker; marker = markers[i]; i++) {
      marker.setMap(null);
    }

    markers = [];
    var bounds = new google.maps.LatLngBounds();
    var marker;
    for (var i = 0, place; place = places[i]; i++) {
      var image = {
        url: place.icon,
        size: new google.maps.Size(71, 71),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(17, 34),
        scaledSize: new google.maps.Size(25, 25)
      };

     marker = new google.maps.Marker({
        map: map,
        icon: image,
        title: place.name,
        position: place.geometry.location
      });

      markers.push(marker);

      bounds.extend(place.geometry.location);
      var name = place.name;
      google.maps.event.addListener(marker,'click',function(){
        
        infowindow.close();
        infowindow.setContent(name);
        infowindow.open(map,marker);
      });
      
      $("<li>")
      .text(place.name)
      .appendTo("#places")
      .click(function(){
        
        new google.maps.event.trigger( marker, 'click' );
        
        map.setZoom(14);
        map.setCenter(marker.getPosition());
      });
      
      
      
      
    }

    map.fitBounds(bounds);
  });

  google.maps.event.addListener(map, 'bounds_changed', function() {
    var bounds = map.getBounds();
    searchBox.setBounds(bounds);
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map-canvas, #map_canvas {
  height: 100%;
}

@media print {
  html, body {
    height: auto;
  }

  #map-canvas, #map_canvas {
    height: 650px;
  }
}

#panel {
  position: absolute;
  top: 5px;
  left: 50%;
  margin-left: -180px;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;
}
#places{
  list-style:none;
  padding:0px;
  margin:0px;
}
#places li{
    cursor: pointer;
    border: 1px solid #e5e5e5;
    
}


#places li:hover{
  background-color:#e5e5e5;
}