title: Joining Search Box & Delete Markers in google maps API Javascript
body: <p>i am totally new in Javascript. I have a project to make a program (based on web page) connected to google maps.</p>
  
  <p>i have read developer.google.com and stuck with it.
  Please help me, how to joining two sample codes place search box (<a href="https://developers.google.com/maps/documentation/javascript/examples/places-searchbox" rel="nofollow">https://developers.google.com/maps/documentation/javascript/examples/places-searchbox</a>) and marker remove (<a href="https://developers.google.com/maps/documentation/javascript/examples/marker-remove" rel="nofollow">https://developers.google.com/maps/documentation/javascript/examples/marker-remove</a>)</p>
  
  <p>thanks</p>
  
  <p>Update: this is my code (for now) </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no"&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Places Searchbox&lt;/title&gt;
      &lt;style&gt;
        html, body {
          height: 100%;
          margin: 0;
          padding: 0;
        }
        #map {
          height: 100%;
        }
        .controls {
          margin-top: 10px;
          border: 1px solid transparent;
          border-radius: 2px 0 0 2px;
          box-sizing: border-box;
          -moz-box-sizing: border-box;
          height: 32px;
          outline: none;
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
        }
  
        #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: 300px;
        }
  
        #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;
        }
        #target {
          width: 345px;
        }
     #floating-panel {
          position: absolute;
          top: 10px;
          left: 25%;
          z-index: 5;
          background-color: #fff;
          padding: 5px;
          border: 1px solid #999;
          text-align: center;
          font-family: 'Roboto','sans-serif';
          line-height: 30px;
          padding-left: 10px;
        }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;input id="pac-input" class="controls" type="text" placeholder="Search Box"&gt;
      &lt;div id="floating-panel"&gt;
        &lt;input onclick="clearMarkers();" type=button value="Hide Markerr"&gt;
        &lt;input onclick="showMarkers();" type=button value="Show All Markerr"&gt;
        &lt;input onclick="deleteMarkers();" type=button value="Delete Markerr"&gt;
      &lt;/div&gt;
   &lt;div id="map"&gt;&lt;/div&gt;
      &lt;script&gt;
        // This example adds a search box to a map, using the Google Place Autocomplete
        // feature. People can enter geographical searches. The search box will return a
        // pick list containing a mix of places and predicted search terms.
  
        // This example requires the Places library. Include the libraries=places
        // parameter when you first load the API. For example:
        // &lt;script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&amp;libraries=places"&gt;
  
        function initAutocomplete() {
    var Markerr = [];
          var map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: -7.266813, lng: 112.770218},
            zoom: 13,
            mapTypeId: 'roadmap'
          });
    
    
          // Create the search box and link it to the UI element.
          var input = document.getElementById('pac-input');
          var searchBox = new google.maps.places.SearchBox(input);
          map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
  
          // Bias the SearchBox results towards current map's viewport.
          map.addListener('bounds_changed', function() {
            searchBox.setBounds(map.getBounds());
          });
  
          var markers = [];
          // Listen for the event fired when the user selects a prediction and retrieve
          // more details for that place.
          searchBox.addListener('places_changed', function() {
            var places = searchBox.getPlaces();
  
            if (places.length == 0) {
              return;
            }
  
            // Clear out the old markers.
            markers.forEach(function(marker) {
              marker.setMap(null);
            });
            markers = [];
  
            // For each place, get the icon, name and location.
            var bounds = new google.maps.LatLngBounds();
            places.forEach(function(place) {
              if (!place.geometry) {
                console.log("Returned place contains no geometry");
                return;
              }
              var icon = {
                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)
              };
  
              // Create a marker for each place.
              markers.push(new google.maps.Marker({
                map: map,
                icon: icon,
                title: place.name,
                position: place.geometry.location
              }));
  
              if (place.geometry.viewport) {
                // Only geocodes have viewport.
                bounds.union(place.geometry.viewport);
              } else {
                bounds.extend(place.geometry.location);
              }
            });
            map.fitBounds(bounds);
          });
    // -----------------------------
    // This event listener will call addMarker() when the map is clicked.
          map.addListener('click', function(event) {
            addMarker(event.latLng);
          });
  
          // Adds a marker at the center of the map.
          addMarker(haightAshbury);
    
    // *********************************
        }
    // Adds a marker to the map and push to the array.
        function addMarker(location) {
          var marker = new google.maps.Marker({
            position: location,
            map: map
          });
          Markerr.push(marker);
        }
  
        // Sets the map on all Markerr in the array.
        function setMapOnAll(map) {
          for (var i = 0; i &lt; Markerr.length; i++) {
            Markerr[i].setMap(map);
          }
        }
  
        // Removes the Markerr from the map, but keeps them in the array.
        function clearMarkers() {
          setMapOnAll(null);
        }
  
        // Shows any Markerr currently in the array.
        function showMarkers() {
          setMapOnAll(map);
        }
  
        // Deletes all Markerr in the array by removing references to them.
        function deleteMarkers() {
          clearMarkers();
          Markerr = [];
        }
      &lt;/script&gt;
      &lt;script src="https://maps.googleapis.com/maps/api/js?key=[API]&amp;libraries=places&amp;callback=initAutocomplete"
           async defer&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>