Refresh Google Karte in Jquery Multiple Step Form

Question

Ich habe ein Jquery-Formular mit mehreren Schritt und den zweiten Schritt möchte ich eine Google-Karte div. Jetzt funktioniert dieses GMAP Div nicht, nur teilweise zeigt. Ich habe viele Fragen über die Aktualisierung der Karte in Bootstrap-Registerkarten gelesen, aber ich weiß nicht, wie ich sie für meinen Fall anwenden soll.

Ich habe mit diesem Code versucht

HTML

<fieldset> <!--step 1--> 
some inputs 
<input type="button" name="next" class="refresh next action-button" value="Next" /> 
</fieldset> 
<fieldset> <!--step 2--> 
<div id="maphome"></div> <!-- NOT LOADING THE MAP --> 
<input type="button" name="previous" class="previous" value="Previous" /> 
<input type="button" name="next" class="next action-button" value="Next" /> 
</fieldset> 

JQuery/JS (Ich habe versucht)

var addressPicker = new AddressPicker({ 
    map: { 
     id: '#maphome', 
     styles: <?php echo $map_style; ?> 
    } 
}); 

// instantiate the typeahead UI 

$('#address').typeahead(null, { 
    displayKey: 'description', 
    source: addressPicker.ttAdapter() 
}); 

// Bind some event to update map on autocomplete selection 

$('#address').bind('typeahead:selected', addressPicker.updateMap); 
$('#address').bind('typeahead:cursorchanged', addressPicker.updateMap); 

//This is not refreshing 

$('.refresh').on('click', function() { 
    setTimeout(function(){ 
     google.maps.event.trigger(map, 'resize'); 
    }, 50); 
}); 

Können Sie mir helfen? Danke im Voraus.

Answer 1

Versuchen Sie eine Höhenklasse zu #maphome hinzuzufügen, wenn Sie noch keine dort haben.