2017-06-30 20 views
-1

のGoogleマップを初期化した後、入力後にGoogleマップを郵便番号に配置しようとしています入力郵便番号

何が間違っていますか?誰かが私に解決策を教えてもらえますか?私にとって

<!DOCTYPE html > 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>g</title> 
     <style> 
      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; 
      } 

     </style> 
    </head> 

    <body> 
     <div id="map"></div> 
     <div id ="logo_top"></div> 
     <form> 
      PLZ: <input type="text" name="PLZ" id="PLZ"><br> 
      <button onclick="codeAddress(PLZ)">Suchen</button> 
     </form> 
     <div id="right-panel"> 
     <br> 
     <div id="directions-panel"></div> 
     </div> 

     <script>   
     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 + '<br>'; 

      }); 
      }); 
     }    

     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); 
          } 
        }); 
      }  

    </script> 
    <script async defer 
    src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap"> 
    </script> 

    </body> 
</html> 

それは

答えて

0
<!DOCTYPE html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>g</title> 
     <style> 
      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; 
      } 

     </style> 
    </head> 

    <body> 
     <div id="map"></div> 
     <div id ="logo_top"></div> 

      <input type="text" name="PLZ" id="PLZ"><br> 
      <button onclick="codeAddress()">Suchen</button> 


     <div id="right-panel"> 
     <br> 
     <div id="directions-panel"></div> 
     </div> 

     <script>   
     var customLabel = { 
     restaurant: { 
      label: 'BE' 
     }, 
     bar: { 
      label: 'BS' 
     } 
     };  
var map 
      var geocoder; 

      function initMap() {    
       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 
     }    

     function downloadUrl(url, callback) { 
     var request = window.ActiveXObject ? 
      new ActiveXObject('Microsoft.XMLHTTP') : 
      new XMLHttpRequest; 

     request.onreadystatechange = function() { 
      if (request.readyState == 4) { 
      request.onreadystatechange = codeAddress; 
      callback(request, request.status); 
      } 
     }; 

     request.open('GET', url, true); 
     request.send(null); 
     } 


      function codeAddress() { 
      var zipCode = document.getElementById("PLZ").innerHTML; 
        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); 
          } 
        }); 
      } 


    </script> 
    <script async defer 
    src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap"> 
    </script> 

    </body> 
</html> 
+0

多くのおかげで、私はなぜ知っているが、 'のdocument.getElementById( "PLZ")ドントどのように見えるかという単純ではないit's innerHTMLの;' doesnの 'document.getElementById(" PLZ ")。value;' は、あなたのソリューションが本当に助けになりました! – Moribundus