我想让谷歌地图在输入邮政编码时显示地址。它在Firefox中工作正常，但由于某些原因，js库不加载chrome，我无法在chrome中显示ma。这是我的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<link rel="stylesheet" href="form.css">
<script type="text/javascript" src="form.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&callback=initMap" async defer></script>
<script language="javascript" src="https://maps.google.com/maps/api/js?sensor=false&key=AIzaSyAGF0XkTW0tAXZLMw-6AI9106H68N0aWio"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
</head>
<body>
<div class="container">
<div class="row" style="background-color:#ffffff;">
<div class="col-12 col-md-12" style="background-color:#ffffff;">
<nav class="navbar navbar-toggleable-md navbar-light bg-faded" style="background-color:#ffffff;">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar w/ text</a>
<!-- Define your search form -->
<form class="navbar-form navbar-left" role="search">
<!-- Define a button to toggle the search area -->
<button id='search-button' class='btn btn-default '><img src="magnifying-glass-search1.png"></button>
<!-- Create your entire search form -->
<div id='search-form' class="form-group">
<div class="input-group">
<span id='search-icon' class="input-group-addon"><img src="magnifying-glass-search1.png"></span>
<input type="text" class="form-control" placeholder="Search">
</div>
</div>
</form>
<script type='text/javascript'>
// When your page loads
$(function(){
// When the toggle areas in your navbar are clicked, toggle them
$("#search-button, #search-icon").click(function(e){
e.preventDefault();
$("#search-button, #search-form").toggle();
});
})
</script>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto nav justify-content-end">
<li class="nav-item active">
</li>
<li class="nav-item">
</li>
<li class="nav-item">
</li>
</ul>
<span class="navbar-text">
<a href="" style="color:#000000;">Post</a>
<a href="" style="color:#000000;">Sign In</a>
</span>
</div>
</nav>
<hr>
<h3 style="text-align:center;">Lorem Ipsum</h3>
<h4 style="text-align:center;">"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</h4>
<h5 style="text-align:center;">"There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."</h5>
<div>
<form style="padding:10px 40px 10px 40px;border:1px solid #ababab;border-radius: 5px;">
<span><strong>Account Sign Up</strong></span>
<div class="form-group">
<div class="form-group row">
<label for="name" class="col-sm-12 col-form-label">Name</label>
<div class="col-sm-6" id="fname">
<input type="text" class="form-control" id="firstName" aria-describedby="fname" placeholder="First Name">
</div>
<div class="col-sm-6" id="lname">
<input type="text" class="form-control" id="lastName" aria-describedby="lname" placeholder="Last Name">
</div>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="email1" aria-describedby="emailHelp" placeholder="name@example.com">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Create Your Password</label>
<input type="password" class="form-control" id="password" placeholder="Password"><br />
<input type="password" class="form-control" id="confirmPassword" placeholder="Confirm Password">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Phone Number</label>
<small id="textHelp" class="form-text text-muted">Other people will never see your phone number.</small>
<input type="text" class="form-control" id="phone" placeholder="Phone Number"><br />
</div>
</form>
</div><!--end of 1st form-->
<div style="padding-top:15px;">
<form style="padding:10px 40px 10px 40px;border:1px solid #ababab;border-radius: 5px;">
<span><strong>Profile</strong></span>
<div class="form-group">
<div class="form-group row">
<label for="name" class="col-sm-12 col-form-label">Profile Image</label>
<div class="col-sm-2" id="profileImg">
<img src="anonymous.jpg">
<input type="file" class="form-control-file" id="InputFile" aria-describedby="fileHelp">
</div>
<div class="col-sm-10" id="aboutMe">
<textarea class="form-control" id="aboutMe" rows="3" placeholder="About me"></textarea>
</div>
</div>
</div>
<div class="form-group">
<div class="form-group row">
<div class="col-sm-2" id="chooseGender">
<h5 style="padding-top:6px;">I am</h5>
</div>
<div class="col-sm-4" id="selectGender">
<select class="form-control" id="gender">
<option>Male</option>
<option>Female</option>
</select>
</div>
</div>
<div class="form-group">
<div class="form-group row">
<label for="exampleInputbirthday" class="col-sm-12">Birthday</label>
<small class="col-sm-12" id="textHelp" class="form-text text-muted">You must be 18 or older. Other people won't see your birthday.</small>
<div class="col-sm-4" id="month">
<select class="form-control" id="exampleMonth">
<option selected>Month</option>
<option>January</option>
<option>February</option>
<option>March</option>
<option>April</option>
<option>May</option>
<option>June</option>
<option>July</option>
<option>August</option>
<option>September</option>
<option>October</option>
<option>November</option>
<option>December</option>
</select>
</div>
<div class="col-sm-4" id="day">
<select class="form-control" id="selectDay">
<option selected>Day</option>
<script>
var min = 1,
max = 31,
select = document.getElementById('selectDay');
for (var i = min; i<=max; i++){
var opt = document.createElement('option');
opt.value = i;
opt.innerHTML = i;
select.appendChild(opt);
}
</script>
</select>
</div>
<div class="col-sm-4" id="year">
<select class="form-control" id="selectYear">
<option selected>Year</option>
<script>
var min = 1936,
max = 2089,
select = document.getElementById('selectYear');
for (var i = min; i<=max; i++){
var opt = document.createElement('option');
opt.value = i;
opt.innerHTML = i;
select.appendChild(opt);
}
select.value = new Date().getFullYear();
</script>
</select>
</div>
</div>
</div>
<div class="form-group">
<label for="occupation">Occupation</label>
<input type="text" class="form-control" id="occupation" placeholder="Title"><br />
</div>
</form>
</div><!--end of 2nd form-->
<div style="padding-top:15px;">
<form style="padding:10px 40px 10px 40px;border:1px solid #ababab;border-radius: 5px;">
<span><strong>Location</strong></span>
<div class="form-group">
<div>
<label for="labelCountry">Country</label>
<select name="country" class="form-control" id="country" onchange="stateMenu(this.value);">
<option value="" selected>Select a Country</option>
<option value="US">United States</option>
<option value="CA">Canda</option>
<option value="In">India</option>
<option value="UK">United Kingdom</option>
<option value="FR">France</option>
<option value="CH">China</option>
<option value="JA">Japan</option>
<option value="GE">Germany</option>
<option value="AU">Australia</option>
<option value="RU">Russia</option>
<option value="CA">Canada</option>
<option value="PA">Pakistan</option>
<option value="IT">Italy</option>
<option value="SP">Spain</option>
<option value="SK">South Korea</option>
<option value="PH">Philippines</option>
<option value="EN">England</option>
<option value="EG">Egypt</option>
<option value="SI">Singapore</option>
<option value="GR">Greece</option>
<option value="BR">Brazil</option>
</select>
</div>
<div>
<label for="stateLabel">Province/State</label>
<select class="form-control" id="state" placeholder="Province/State">
<option selected value=''>Select a Province</option>
</select>
</div>
<div class="form-group row">
<div class="col-sm-6">
<label for="name" class="col-form-label">City</label>
<input type="text" class="form-control" id="city" aria-describedby="city" placeholder="Enter your City">
</div>
<div class="col-sm-6">
<label for="name" class="col-form-label">Town</label>
<input type="text" class="form-control" id="town" aria-describedby="town" placeholder="Enter your Town">
</div>
</div>
<div class="form-group row">
<div class="col-sm-6" id="targetZip">
<label for="name" class="col-form-label">Postal/Zip Code</label>
<div id="map"></div>
</div>
<div class="col-sm-6">
<input class="form-control controls" type="text" id="searchInput" placeholder="Enter postal code">
</div>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-lg-6" style="padding-top:10px;">
<label for="name" class="col-form-label">There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."</label>
</div>
<div class="col-lg-6" style="padding-top:10px;float:right;">
<div class="col-lg-4">
</div>
<div class="col-lg-4">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
</div><!--end of 3rd form-->
</div><!end of 1st column--->
</div><!end of 1st row--->
</div><!end of 1st container--->
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>
<!---JS Code--->
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -33.8688, lng: 151.2195},
zoom: 13
});
var input = document.getElementById('searchInput');
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
var infowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
map: map,
anchorPoint: new google.maps.Point(0, -29)
});
autocomplete.addListener('place_changed', function() {
infowindow.close();
marker.setVisible(false);
var place = autocomplete.getPlace();
if (!place.geometry) {
window.alert("Autocomplete's returned place contains no geometry");
return;
}
// If the place has a geometry, then present it on a map.
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17);
}
marker.setIcon(({
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(35, 35)
}));
marker.setPosition(place.geometry.location);
marker.setVisible(true);
var address = '';
if (place.address_components) {
address = [
(place.address_components[0] && place.address_components[0].short_name || ''),
(place.address_components[1] && place.address_components[1].short_name || ''),
(place.address_components[2] && place.address_components[2].short_name || '')
].join(' ');
}
infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
infowindow.open(map, marker);
//Location details
for (var i = 0; i < place.address_components.length; i++) {
if(place.address_components[i].types[0] == 'postal_code'){
document.getElementById('postal_code').innerHTML = place.address_components[i].long_name;
}
if(place.address_components[i].types[0] == 'country'){
document.getElementById('country').innerHTML = place.address_components[i].long_name;
}
}
document.getElementById('location').innerHTML = place.formatted_address;
document.getElementById('lat').innerHTML = place.geometry.location.lat();
document.getElementById('lon').innerHTML = place.geometry.location.lng();
});
}