私のサブミットフォームでは、前のフィールドセットが有効であれば、フィールドセットをスライドアップしてjQueryでスライドします。 フィールドセット番号3には、経度と緯度に基づいて顧客の住所を見つけるためのGoogleマップのマップがあります。GoogleマップはjQueryでフィールドセットで動作しませんSlide Up/Down
<fieldset id="werkgebied" style="display: none;">
<div class="row">
<div class="form-group">
<label class="col-md-3 control-label" for="adres">Uw Adres</label>
<div class="col-md-6" id="stapwerkgebied_adres">
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<label class="col-md-3 control-label" for="adres">Werkgebied</label>
<div class="col-md-6">
<div id="kaartje" style="width:400px;height:400px;"></div>
<script type="text/javascript">
var map;
var centerpoint;
function initmap(latvar=52.3747388,longvar=4.7585307){
var map = new google.maps.Map(document.getElementById('kaartje'), {
center: {lat: Number(latvar), lng: Number(longvar)},
zoom: 9
});
var kmRadius = $("#aantalkm").val();
circle = new google.maps.Circle({
center: {lat: Number(latvar), lng: Number(longvar)},
map: map,
strokeColor: '#000',
strokeWeight: 2,
strokeOpacity: 0.5,
fillColor: '#046e94',
fillOpacity: 0.5,
radius: kmRadius * 1000
});
}
function updateMarker(coord) {
var kmRadius = $("#aantalkm").val();
circle.setRadius(kmRadius*1000);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDnsp8B8c942fe8i42UEAImAcAoTbDVYN4&callback=initmap">
</script>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<label class="col-md-3 control-label" for="aantalkm">Afstand (km)</label>
<div class="col-md-2"><input id="aantalkm" class="form-control" type="text" onChange="updateMarker()" value="20" />
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<label class="col-md-3 control-label" for="submit"></label>
<div class="col-md-6">
<button type="button" id="werkgebied_prev" class="btn btn-primary mb-xl previous">Vorige</button>
<button type="button" id="werkgebied_next" class="btn btn-primary mb-xl next">Verder</button>
</div>
</div>
</div>
</fieldset>
フィールドセット3が表示された場合、マップは機能しません。
style="display: none;"
マップは機能しますが、前の2つのフィールドセットが正しく動作するまで非表示にはなりません。