कोणीय 2+ में बूटस्ट्रैप मोडल में google autocomplete कैसे बनाएं?

Question

मैं कोणीय Google मानचित्र (एजीएम) का उपयोग कर रहा हूं, मैंने नीचे से Google स्वत: पूर्ण बनाया है।

pickAdd() { 
    var autocomplete:any; 
    var options = { componentRestrictions: {country: "IN"} }; 
    this. inputAddress = document.getElementById('address'); 
    autocomplete = new 
    google.maps.places.Autocomplete(this.inputAddress,options) 
    google.maps.event.addListener(autocomplete, 'place_changed',()=> { 
    this.ngZone.run(() => { 
     this.zoom=8; 
     var place = autocomplete.getPlace(); 
     this.lat = place.geometry.location.lat(); 
     this.lng = place.geometry.location.lng(); 
     this.getGeoLocation(this.lat,this.lng); 
    }); 
    }); 
} 

सीएसएस:

sebm-google-map { 
    height: 300px; 
} 

अगर मैं बूटस्ट्रैप मोडल में उपरोक्त कोड डाल दिया, गूगल स्वत: पूर्ण काम नहीं कर रहा

एचटीएमएल

<input type="text" #pick id="address" class="form-control" [(ngModel)]="pickAddress" name="pickAddress" (ngModelChange)="pickAdd()" placeholder="Pick Up Address" onclick="return false" style="padding-left: 30px;border-radius: 25px;border: 1px solid #31708f;" 

टी फ़ाइल में में

नोट:

कोड ऊपर

(सामान्य दृश्य में) बूटस्ट्रैप मोडल के बिना काम कर रहा है

Answer 1

यह सामान्य दृश्य में काम करता है, और यह एक मॉडल में काम नहीं करता, तो मैं आपकी समस्या का अनुमान के बारे में है जेड-इंडेक्स सीएसएस संपत्ति।

समाधान गूगल स्वत: पूर्ण आइटम के z- सूचकांक मोडल बूटस्ट्रैप z- सूचकांक की तुलना में अधिक स्थापित करने के लिए है:

.pac-container { 
    z-index: 1054 !important; 
} 

स्रोत: https://github.com/twbs/bootstrap/issues/4160

मुझे यकीन है कि इस समस्या है कर रहा हूँ क्योंकि अगर आप ngx-bootstrap modal & AGM (you're using an old version is sebm-google-map) के लिए सभी निर्देशों का पालन किया है, आप देखेंगे कि कोई त्रुटि नहीं है लेकिन केवल स्वत: पूर्ण आइटम दिखाई नहीं दे रहा है।

इस plunker मैं बनाया (कोणीय, NGX-बूटस्ट्रैप, कोणीय-google-नक्शे) में

देखो और सब ठीक है:

https://embed.plnkr.co/N2Oiu5JzirOfUuA8Te3o/