Après avoir optimisé la fenêtre google map, la saisie semi-automatique ne fonctionne pas

Question

J'essaie d'utiliser google map avec mvc dans mon projet. Je peux trouver l'emplacement en tapant dans la zone de texte alors que la carte est minimisé. L'emplacement est affiché automatiquement. Cependant, l'emplacement ne s'affiche pas automatiquement dans le état.

Voici mon code:

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: Screenshot 1 Screenshot 2

Answer 1

Définir un z-index pour .pac-container qui est au-dessus de la carte (avertissement comportement en situation irrégulière, peuvent changer avec les futures versions de l'API)

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

proof of concept fiddle

extrait de code:

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>