title: how to center google map with input zip code
body: <p>I´m trying to center a google map after init to a zipcode from input button</p>
  
  <p>What am doing wrong? can someone give me a solution please?</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;g&lt;/title&gt;
          &lt;style&gt;
              html, body {
                  width: 100%;
                  height: 100%;
                  font-family: 'Arial','sans-serif';
                  font-size:12px;
                  margin: 0;
                  padding: 0;
              }
  
              #map {
                  width: 75%;
                  height: 100%;
                  float: left;
              }
  
              #right-panel {
                  width: 24%;
                  float: left;
                  text-align: left;
                  padding-left: 0.5%;
              }
  
              #logo_top {
              width: 20%;
              height:5%;
              float: left;
              background-image: url(http://darwin.pytalhost.de/vf_top_LS4.png);
              -moz-background-size:100% 100%; /* Firefox */
              -webkit-background-size:100% 100%; /* Safari, Chrome */
              background-size:100% 100%; /* Opera, IE, W3C Standard */
              padding: 10px;
              margin: 10px;
              }
  
          &lt;/style&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
          &lt;div id="map"&gt;&lt;/div&gt;
          &lt;div id ="logo_top"&gt;&lt;/div&gt;
          &lt;form&gt;
              PLZ: &lt;input type="text" name="PLZ" id="PLZ"&gt;&lt;br&gt;
              &lt;button onclick="codeAddress(PLZ)"&gt;Suchen&lt;/button&gt;
          &lt;/form&gt;
          &lt;div id="right-panel"&gt;
          &lt;br&gt;
          &lt;div id="directions-panel"&gt;&lt;/div&gt;
          &lt;/div&gt;
  
          &lt;script&gt;        
        var customLabel = {
          restaurant: {
            label: 'BE'
          },
          bar: {
            label: 'BS'
          }
        };    
  
              var geocoder;
  
              function initMap() {            
                  var map = new google.maps.Map(document.getElementById('map'), {
                      center: new google.maps.LatLng(-33.863276, 151.207977),
                      zoom: 12
                  });
                  geocoder = new google.maps.Geocoder();
          var infoWindow = new google.maps.InfoWindow;
  
                  //eigenes
                  var summaryPanel = document.getElementById('directions-panel');
                  summaryPanel.innerHTML = '';
  
            // Change this depending on the name of your PHP or XML file
            downloadUrl('http://darwin.pytalhost.de/create_markers.php', function(data) {
              var xml = data.responseXML;
              var markers = xml.documentElement.getElementsByTagName('marker');
              Array.prototype.forEach.call(markers, function(markerElem) {
                var name = markerElem.getAttribute('name');
                var address = markerElem.getAttribute('address');
                var type = markerElem.getAttribute('type');
                var point = new google.maps.LatLng(
                    parseFloat(markerElem.getAttribute('lat')),
                    parseFloat(markerElem.getAttribute('lng')));
  
                var infowincontent = document.createElement('div');
                var strong = document.createElement('strong');
                strong.textContent = name
                infowincontent.appendChild(strong);
                infowincontent.appendChild(document.createElement('br'));
  
                var text = document.createElement('text');
                text.textContent = address
                infowincontent.appendChild(text);
                var icon = customLabel[type] || {};
                var marker = new google.maps.Marker({
                  map: map,
                  position: point,
                  label: icon.label   + '1'               
                });
  
                marker.addListener('click', function() {
                  infoWindow.setContent(infowincontent);
                  infoWindow.open(map, marker);
                });       
  
                              //eigenes
                              summaryPanel.innerHTML += address   + '&lt;br&gt;';
  
              });
            });
          }               
  
        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() {}
  
              function codeAddress(zipCode) {
                      geocoder.geocode({
                              'address': zipCode, "componentRestrictions":{"country":"DE"}
                      }, function (results, status) {
                              if (status == google.maps.GeocoderStatus.OK) {
                                      map.setCenter(results[0].geometry.location);
                                      var marker = new google.maps.Marker({
                                              map: map,
                                              position: results[0].geometry.location
                                      });
                              } else {
                                      alert("Geocode was not successful for the following reason: " + status);
                              }
                      });
              }       
  
      &lt;/script&gt;
      &lt;script async defer
      src="https://maps.googleapis.com/maps/api/js?key=&amp;callback=initMap"&gt;
      &lt;/script&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>for me it´s not that simple how it looks</p>