Google maps store locator and search

Demo for: https://stackoverflow.com/questions/48710364/google-maps-store-locator-and-search

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;signed_in=false&amp;libraries=places&amp;key=AIzaSyDOorkShHO1xhw2zbjz-OZdSKP-xQ65AS0"></script>
<input id="pac-input" class="controls" type="text" placeholder="City, State or Zip Code"><br><br>
<div id="side_bar"></div>

<div id="map_canvas" style="width: 550px; height: 450px"></div>

CSS

#pac-input {
  background-color: #fff;
  font-family: Roboto;
  font-size: 15px;
  font-weight: 300;
  margin-left: 12px;
  padding: 0;
  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;
}

JavaScript

var side_bar_html = "";
// arrays to hold copies of the markers and html used by the side_bar     
var gmarkers = [];
var marker;
// create the map    
var myOptions = {    
  center: new google.maps.LatLng(35.467560, -97.516428),    
  zoom:6,    
  disableDefaultUI: true,      
  mapTypeId: google.maps.MapTypeId.ROADMAP     
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var t = 1;

function initialize() {     

    google.maps.event.addListener(map, 'click', function() {    
        infowindow.close();    
    });    

    var point = new google.maps.LatLng(35.979088,-96.112985);    
    var marker = createMarker(point,"Firestone, Oklahoma City<br>211 411 2311");
    point = new google.maps.LatLng(38.0409333,23.7954601);    
    marker = createMarker(point,"Nespresso S.A.","<b>Nespresso S.A.</b><br>Agiou Thoma 27,15124,Marousi");
    point = new google.maps.LatLng(38.0473031,23.8053483);    
    marker = createMarker(point,"Regency Entertainment","<b>Regency Entertainment</b><br>Agiou Konstantinou 49,15124,Marousi <br>210 614 9800");    
    point = new google.maps.LatLng(38.050986,23.8084322);    
    marker = createMarker(point,"Just4U","<b>Just4U</b> <br>Dimitriou Gounari 84, 15124, Marousi<br>210 614 1923");   
    point = new google.maps.LatLng(38.0400533,23.8011982);    
    marker = createMarker(point,"Ekka Cars S.A.","<b>Ekka</b> <br>Leoforos Kifisias 79,15124,Marousi<br>210 349 8000");

    initSearchBox(map, 'pac-input'); 

}


var infowindow = new google.maps.InfoWindow({
  size: new google.maps.Size(150, 50)
});

// This function picks up the click and opens the corresponding info window    
function myclick(i) {
  google.maps.event.trigger(gmarkers[i], "click");

}

function initSearchBox(map, controlId) {
  // Create the search box and link it to the UI element.    
  var input = (document.getElementById(controlId));
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
  var searchBox = new...