Googleマップのウィンドウを最大化した後、オートコンプリートが機能しない

Question

私のプロジェクトでmvcでGoogleマップを使用しようとしています。 マップがで最小化されている間に、テキストボックスに入力すると、場所はわかりますです。 場所が自動的に表示されます。 の位置は自動的に表示されません状態です。ここで

は私のコードです：

function initialize() { 
    var latlng = new google.maps.LatLng(Lat, Long); 
    var map = new google.maps.Map(document.getElementById('map'), { 
     center: latlng, 
     zoom: 13 
    }); 
    var marker = new google.maps.Marker({ 
     map: map, 
     position: latlng, 
     draggable: true, 
     anchorPoint: new google.maps.Point(0, -29) 
    }); 
    var input = document.getElementById('searchInput'); 
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); 
    var geocoder = new google.maps.Geocoder(); 
    var autocomplete = new google.maps.places.Autocomplete(input); 
    //Set initial restrict countries. 
    autocomplete.setComponentRestrictions(
     { 'country': ['mm'] }); 
    autocomplete.bindTo('bounds', map); 
    var infowindow = new google.maps.InfoWindow(); 
    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 (place.geometry.viewport) { 
      map.fitBounds(place.geometry.viewport); 
     } else { 
      map.setCenter(place.geometry.location); 
      map.setZoom(17); 
     } 
     marker.setPosition(place.geometry.location); 
     marker.setVisible(true); 
     infowindow.setContent(place.formatted_address); 
     infowindow.open(map, marker); 

    }); 
    // this function will work on marker move event into map 
    google.maps.event.addListener(marker, 'dragend', function() { 
     geocoder.geocode({ 'latLng': marker.getPosition() }, function (results, status) { 
      if (status == google.maps.GeocoderStatus.OK) { 
       if (results[0]) { 
        infowindow.setContent(results[0].formatted_address); 
        infowindow.open(map, marker); 
       } 
      } 
     }); 
    }); 
} 
google.maps.event.addDomListener(window, 'load', initialize); 

スクリーンショット： Screenshot 1 Screenshot 2

Answer 1

APIの将来のリリースで変更される可能性があり、マップ上にある.pac-container（ためz-indexが文書化されていない行動を警告に設定）

.pac-container { 
    z-index: 2147483648; 
} 

proof of concept fiddle

コードスニペット：助けを

function initialize() { 
 
    var latlng = new google.maps.LatLng(21.958828, 96.089103); 
 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
    center: latlng, 
 
    zoom: 13 
 
    }); 
 
    var marker = new google.maps.Marker({ 
 
    map: map, 
 
    position: latlng, 
 
    draggable: true, 
 
    anchorPoint: new google.maps.Point(0, -29) 
 
    }); 
 
    var input = document.getElementById('searchInput'); 
 
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); 
 
    var geocoder = new google.maps.Geocoder(); 
 
    var autocomplete = new google.maps.places.Autocomplete(input); 
 
    //Set initial restrict countries. 
 
    autocomplete.setComponentRestrictions({ 
 
    'country': ['mm'] 
 
    }); 
 
    autocomplete.bindTo('bounds', map); 
 
    var infowindow = new google.maps.InfoWindow(); 
 
    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 (place.geometry.viewport) { 
 
     map.fitBounds(place.geometry.viewport); 
 
    } else { 
 
     map.setCenter(place.geometry.location); 
 
     map.setZoom(17); 
 
    } 
 
    marker.setPosition(place.geometry.location); 
 
    marker.setVisible(true); 
 
    infowindow.setContent(place.formatted_address); 
 
    infowindow.open(map, marker); 
 

 
    }); 
 
    // this function will work on marker move event into map 
 
    google.maps.event.addListener(marker, 'dragend', function() { 
 
    geocoder.geocode({ 
 
     'latLng': marker.getPosition() 
 
    }, function(results, status) { 
 
     if (status == google.maps.GeocoderStatus.OK) { 
 
     if (results[0]) { 
 
      infowindow.setContent(results[0].formatted_address); 
 
      infowindow.open(map, marker); 
 
     } 
 
     } 
 
    }); 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize);

html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    z-index: 0; 
 
} 
 

 
#searchInput { 
 
    top: 15px; 
 
    left: 120px; 
 
} 
 

 
.pac-container { 
 
    z-index: 2147483648; 
 
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script> 
 
<input id="searchInput" /> 
 
<div id="map"></div>