Google Maps API和JQuery Form向导发生冲突

Question

我尝试使用谷歌地图API与Jquery表单向导，每当我使用表单向导地图时，grey.its就会消失（＆＃34;在Firefox地图显示中，如果我有萤火虫＆＃34;）。

每当我独立加载地图时它会显示但是无论何时，我都会使用标签来显示地图，即表格向导地图淡出灰色

Google Map API

function initialize() {
    var myOptions = {
        zoom: 2,
        center: {
            lat: 18.568546300871457,
            lng: 73.90839194878936
        },
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    geocoder = new google.maps.Geocoder();
    var map = new google.maps.Map(document.getElementById("map_canvas"),
    myOptions);
    google.maps.event.addListener(map, 'click', function (event) {
        placeMarker(event.latLng);
    });

    var marker;

    function placeMarker(location) {
        if (marker) // If Marker Already Exists
        {
            marker.setPosition(location); // Then Change Position
        } else // Else Create New
        {
            marker = new google.maps.Marker({
                position: location,
                animation: google.maps.Animation.DROP, // DROP Animation
                map: map
            });
            marker.addListener('click', toggleBounce); // Call to Bounce Function
        }
        document.getElementById('lat').value = location.lat();
        document.getElementById('lng').value = location.lng();
        getAddress(location);
    }

    function toggleBounce() // Function to BOUNCE Marker
    {
        if (marker.getAnimation() !== null) {
            marker.setAnimation(null);
        } else {
            marker.setAnimation(google.maps.Animation.BOUNCE);
        }
    }

    function getAddress(latLng) {
        geocoder.geocode({
            'latLng': latLng
        },

        function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                if (results[0]) {
                    document.getElementById("address").value = results[0].formatted_address;
                } else {
                    document.getElementById("address").value = "No results";
                }
            } else {
                document.getElementById("address").value = status;
            }
        });
    }
}
google.maps.event.addDomListener(window, 'load', initialize);

jQuery表单向导代码

$(document).ready(function () {

    var navListItems = $('div.setup-panel div a'),
        allWells = $('.setup-content'),
        allNextBtn = $('.nextBtn');
    allPrevBtn = $('.btnPrevious');

    allWells.hide();

    navListItems.click(function (e) {
        //alert('hi');
        e.preventDefault();
        var $target = $($(this).attr('href')),
            $item = $(this);

        if (!$item.hasClass('disabled')) {
            navListItems.removeClass('btn-primary').addClass('btn-default');
            $item.addClass('btn-primary');
            allWells.hide();
            $target.show();
            $target.find('input:eq(0)').focus();
        }
    });

    allNextBtn.click(function () {
        var curStep = $(this).closest(".setup-content"),
            curStepBtn = curStep.attr("id"),
            nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
            curInputs = curStep.find("input[type='text'],input[type='url']"),
            isValid = true;

        $(".form-group").removeClass("has-error");
        for (var i = 0; i < curInputs.length; i++) {
            if (!curInputs[i].validity.valid) {
                isValid = false;
                $(curInputs[i]).closest(".form-group").addClass("has-error");
            }
        }



        if (isValid) nextStepWizard.removeAttr('disabled').trigger('click');
    });

    allPrevBtn.click(function (e) {
        e.preventDefault();

        var curStep = $(this).closest(".setup-content"),
            curStepBtn = curStep.attr("id"),
            nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().prev().children("a"),
            curInputs = curStep.find("input[type='text'],input[type='url']"),
            isValid = true;



        if (isValid) nextStepWizard.removeAttr('disabled').trigger('click');
    });

    $('div.setup-panel div a.btn-primary').trigger('click');

});

＆＃13;

＆＃13;

/*-------------------- Google map JS -----------------*/
	var map;
    var geocoder;
    var mapOptions = { center: new google.maps.LatLng(0.0, 0.0), 
		zoom: 5,
		mapTypeId: google.maps.MapTypeId.ROADMAP };

    function initialize() 
	{
		var myOptions = {
            zoom: 2,
			center: {lat: 18.568546300871457, lng: 73.90839194878936 },
            mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            geocoder = new google.maps.Geocoder();
            var map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);
            google.maps.event.addListener(map, 'click', function(event) {
                placeMarker(event.latLng);
            });

            var marker;
            function placeMarker(location) 
			{
                if(marker)   // If Marker Already Exists
				{ 
                    marker.setPosition(location);    // Then Change Position
                }
				else 		// Else Create New
				{
                    marker = new google.maps.Marker({ 
                        position: location,
						animation: google.maps.Animation.DROP,  // DROP Animation
                        map: map
                    });
					marker.addListener('click', toggleBounce);  // Call to Bounce Function
                }
                document.getElementById('lat').value=location.lat();
                document.getElementById('lng').value=location.lng();
                getAddress(location);
            }
			
			function toggleBounce() // Function to BOUNCE Marker
			{
			  if (marker.getAnimation() !== null) 
			  {
				marker.setAnimation(null);
			  } 
			  else 
			  {
				marker.setAnimation(google.maps.Animation.BOUNCE);
			  }
			}

			function getAddress(latLng) 
			{
				geocoder.geocode( {'latLng': latLng},
					function(results, status) 
					{
						if(status == google.maps.GeocoderStatus.OK) 
						{
							if(results[0]) 
							{
								document.getElementById("address").value = results[0].formatted_address;
							}
						else 
						{
						document.getElementById("address").value = "No results";
						}
					}
					else 
					{
					  document.getElementById("address").value = status;
					}
				  });
			}
    }
      google.maps.event.addDomListener(window, 'load', initialize);

/* --------------- Form wizard -----------------*/

$(document).ready(function () {

    var navListItems = $('div.setup-panel div a'),
            allWells = $('.setup-content'),
            allNextBtn = $('.nextBtn');
			allPrevBtn = $('.btnPrevious');

    allWells.hide();

    navListItems.click(function (e) {
		//alert('hi');
		e.preventDefault();
        var $target = $($(this).attr('href')),
                $item = $(this);

        if (!$item.hasClass('disabled')) {
            navListItems.removeClass('btn-primary').addClass('btn-default');
            $item.addClass('btn-primary');
			allWells.hide();
            $target.show();
            $target.find('input:eq(0)').focus();
        }
    });

    allNextBtn.click(function(){
        var curStep = $(this).closest(".setup-content"),
            curStepBtn = curStep.attr("id"),
            nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
            curInputs = curStep.find("input[type='text'],input[type='url']"),
            isValid = true;

        $(".form-group").removeClass("has-error");
        for(var i=0; i<curInputs.length; i++){
            if (!curInputs[i].validity.valid){
                isValid = false;
                $(curInputs[i]).closest(".form-group").addClass("has-error");
            }
        }
		
		

        if (isValid)
            nextStepWizard.removeAttr('disabled').trigger('click');
    });
	
	allPrevBtn.click(function(e){
		 e.preventDefault();
		 
        var curStep = $(this).closest(".setup-content"),
            curStepBtn = curStep.attr("id"),
            nextStepWizard = $('div.setup-panel div a[href="#' + curStepBtn + '"]').parent().prev().children("a"),
            curInputs = curStep.find("input[type='text'],input[type='url']"),
            isValid = true;

       

        if (isValid)
            nextStepWizard.removeAttr('disabled').trigger('click');
    });

    $('div.setup-panel div a.btn-primary').trigger('click');

});

＆＃13;

body{ 
    margin-top:40px; 
}

.stepwizard-step p {
    margin-top: 10px;
}

.stepwizard-row {
    display: table-row;
}

.stepwizard {
    display: table;
    width: 70%;
    position: relative;
}

.stepwizard-step button[disabled] {
    opacity: 1 !important;
    filter: alpha(opacity=100) !important;
}

.stepwizard-row:before {
    top: 14px;
    bottom: 0;
    position: absolute;
    content: " ";
    width: 100%;
    height: 1px;
    background-color: #ccc;
    z-order: 0;

}

.stepwizard-step {
    display: table-cell;
    text-align: center;
    position: relative;
}

.btn-circle {
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.428571429;
  border-radius: 15px;
}


.tool-tip{
	color: #fff;
	background-color: rgba( 0, 0, 0, .7);
	text-shadow: none;
	font-size: .8em;
	visibility: hidden;
	-webkit-border-radius: 7px; 
	-moz-border-radius: 7px; 
	-o-border-radius: 7px; 
	border-radius: 7px;	
	text-align: center;	
	opacity: 0;
	z-index: 999;
	padding: 3px 8px;	
	position: absolute;
	cursor: default;
	-webkit-transition: all 240ms ease-in-out;
	-moz-transition: all 240ms ease-in-out;
	-ms-transition: all 240ms ease-in-out;
	-o-transition: all 240ms ease-in-out;
	transition: all 240ms ease-in-out;	
}



.tool-tip.top:after,
.tool-tip:after{
	position: absolute;
	bottom: -12px;
	left: 50%;
	margin-left: -7px;
	content: ' ';
	height: 0px;
	width: 0px;
	border: 6px solid transparent;
    border-top-color: rgba( 0, 0, 0, .7);	
}

/* default heights, width and margin w/o Javscript */

.tool-tip,
.tool-tip.top{
	width: 80px;
	height: 22px;
	margin-left: -43px;
}

/* tool tip position right */

.tool-tip.right{
	top: 50%;
	right: auto;
	left: 106%;
	margin-top: -15px;
	margin-right: auto;	
	margin-left: auto;
}

.tool-tip.right:after{
	left: -5px;
	top: 50%;	
	margin-top: -6px;
	bottom: auto;
	border-top-color: transparent;	
    border-right-color: rgba( 0, 0, 0, .7);	
}

/* tool tip position left */

.tool-tip.left{
	top: 50%;
	left: auto;
	right: 105%;
	margin-top: -15px;	
	margin-left: auto;	
}






/* on hover of element containing tooltip default*/

*:not(.on-focus):hover > .tool-tip,
.on-focus input:focus + .tool-tip{
	visibility: visible;
	opacity: 1;
	-webkit-transition: all 240ms ease-in-out;
	-moz-transition: all 240ms ease-in-out;
	-ms-transition: all 240ms ease-in-out;
	-o-transition: all 240ms ease-in-out;
	transition: all 240ms ease-in-out;		
}


/* tool tip slide out */

*:not(.on-focus) > .tool-tip.slideIn,
.on-focus > .tool-tip{
	display: block;
}

.on-focus > .tool-tip.slideIn{
	z-index: -1;
}

.on-focus > input:focus + .tool-tip.slideIn{
	z-index: 1;
}

/* bottom slideIn */

*:not(.on-focus) > .tool-tip.slideIn.bottom,
.on-focus > .tool-tip.slideIn.bottom{
	top: 50%;	
}

*:not(.on-focus):hover > .tool-tip.slideIn.bottom,
.on-focus > input:focus + .tool-tip.slideIn.bottom{
	top: 115%;
}	

.on-focus > input:focus + .tool-tip.slideIn.bottom{
	top: 100%;
}

/* top slideIn */

*:not(.on-focus) > .tool-tip.slideIn,
*:not(.on-focus) > .tool-tip.slideIn.top,
.on-focus > .tool-tip.slideIn,
.on-focus > .tool-tip.slideIn.top{
	bottom: 50%;
}

*:not(.on-focus):hover > .tool-tip.slideIn,
*:not(.on-focus):hover > .tool-tip.slideIn.top,
.on-focus > input:focus + .tool-tip.slideIn,
.on-focus > input:focus + .tool-tip.slideIn.top{
	bottom: 110%;
}	



/* right slideIn */

*:not(.on-focus) > .tool-tip.slideIn.right,
.on-focus > .tool-tip.slideIn.right{
	left: 50%;		
}

*:not(.on-focus):hover > .tool-tip.slideIn.right,
.on-focus > input:focus + .tool-tip.slideIn.right{
	left: 105%;
}
 #map_canvas { margin: 0; padding: 0; height: 40%; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-12"><!--row start-->
<div class="panel panel-default"><!--main panel panel-default start-->
<div class="panel-heading">
	<h3 class="panel-title">Please fill up all Information </h3>
</div>
<div class="panel-body"><!--main panel-body start-->
<form class="form-horizontal" name="add_emp" action="<?=site_url()?>/mis/employee/company_controller" method="post"  enctype="multipart/form-data">
<div class="container">
<!---------TABS---------->
<div class="stepwizard">
    <div class="stepwizard-row setup-panel">
        <div class="stepwizard-step">
            <a href="#step-1" type="button" class="btn btn-primary btn-circle">1</a>
            <p>Step 1</p>
        </div>
        <div class="stepwizard-step">
            <a href="#step-2" type="button" class="btn btn-default btn-circle" disabled="disabled">2</a>
            <p>Step 2</p>
        </div>
        <div class="stepwizard-step">
            <a href="#step-3" type="button" class="btn btn-default btn-circle" disabled="disabled">3</a>
            <p>Step 3</p>
        </div>
    </div>
</div>
</div>
	<!--Company Details panel panel-default start-->
		

<!---------TABS END---------->


<!-----------FORM START--------->


<!-----------STEP 1----------->
 <div class="tab-content">
 
    <div class="row setup-content" id="step-1"  style=" border: 1px solid grey;">
		<div class="panel panel-default">
			<div class="panel-heading">
				<h3 class="panel-title">Company Details 1</h3>
			</div>
			<div class="col-xs-10">
				<div class="col-md-12">
					<div class="form-group">



	

	
						<label id="comp_name" class="col-sm-3 control-label">Company Name<span class="text-red">*</span>:</label>
							<div class="col-sm-3">
	<div style="width: 550px; margin: 0px ;">
		<div style="clear:both;"></div>
		<div class="on-focus clearfix" style="position: relative; padding: 0px; margin: 10px auto; display: table; float: left">						
								<input type="text" name="company_name" class="form-control"  required />
		<div class="tool-tip slideIn right">Required Field</div>	
		</div>
	</div>					</div>
					</div>
				</div>
				<div class="col-md-12">
					<div class="form-group">
							<label for="indust" class="col-sm-3 control-label">Industry<span class="text-red">*</span>:</label>
							<div class="col-sm-3">
							
								<select name="indust" id="indust" class="form-control" required>
									<option value="">--select--</option>
									<option value="manufacturing">Manufacturing</option>
									<option value="energy">Energy</option>
								</select>
							</div>
					</div>
				</div>
				<div class="col-md-12">
					<div class="form-group">
						<label for="scd" class="col-sm-3 control-label">Short Company Description<span class="text-red">*</span>:</label>
							<div class="col-sm-3">
								<textarea maxlength="120" class="form-control" name="scdc" id="scd" required="required">
								</textarea>
							</div>
					</div>
				</div>
				<div class="col-md-12">	
					<div class="form-group">
						<label class="col-sm-3 control-label">Long Company Description</label>
							<div class="col-sm-3">
								<textarea class="form-control" name="lcdc" id="lcd" required>
								</textarea>
							</div>
					</div>
				</div>
				<div class="col-md-12">	
					<div class="form-group">
						<label id="product" class="col-sm-3 control-label">Products and Services(separated by commas)<span class="text-red">*</span>:</label>
							<div class="col-sm-9">
		<div style="width: 550px; margin: 0px ;">
		<div style="clear:both;"></div>
		<div class="on-focus clearfix" style="position: relative; padding: 0px; margin: 10px auto; display: table; float: left">					
								<input type="text" class="form-control" name="prod"  required="required" />
		<div class="tool-tip slideIn right">Required Field</div>	
		</div>
	</div>					
							</div>
					</div>
				</div>
	
				<!--<a  onclick="history.go(-1)" href="<?php echo base_url();?>index.php/paperset/view_data" class="btn btn-default"><span class="glyphicon glyphicon-circle-arrow-left"></span>Back</a>
			
			-->
                <button class="btn btn-primary nextBtn btn-lg pull-right" type="button">Next</button> 
			</div>
		</div>
	</div>

   
	
<!-----------STEP 1 CLOSED---------->


<!---------------STEP 2------------->

    <div class="row setup-content" id="step-2">
        <div class="col-xs-12">
            <div class="col-md-12">
                <h3>Company Details 2</h3>
                <div class="form-group">
                    <label class="control-label">Company Name</label>
                    <input maxlength="200" type="text" class="form-control" name="comp2" placeholder="Enter Company Name" required />
                </div>
                <div class="form-group">
                    <label class="control-label">Company Address</label>
                    <input maxlength="200" type="text" name="cadd" class="form-control" placeholder="Enter Company Address" required />
                </div>
					<button class="btn btn-primary nextBtn btn-lg pull-right" type="button" >Next</button>
					<button class="btn btn-primary btnPrevious btn-lg pull-right" type="reset">Previous</button>
            </div>
        </div>
    </div>
<!---------------STEP 2 CLOSED------------->

<!---------------STEP 3 CLOSED------------->	
    <div class="row setup-content" id="step-3">
        <div class="col-xs-12">
            <div class="col-md-12">
                <h3>Company Details 3</h3>
				<div class="form-group">
                    <form method = "post" action = "<?php echo base_url('employee/submit');?>">
			
<br> &nbsp &nbsp ADDRESS : <input type="text" id="address" size="100"> <br> <br> 
		
&nbsp &nbsp	LATTITUDE : <input type="text" name="lat" id="lat" size="20">&nbsp &nbsp &nbsp &nbsp
			
		LONGITUDE :  <input type="text" name="lng" id="lng" size="20">&nbsp &nbsp &nbsp &nbsp
		
			<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize"></script>

			<input type= "submit" name = "btnsubmit" value ="SUBMIT" />
		</form>
<br>	<div id="map_canvas" ></div>
                </div>
               <button class="btn btn-success btn-lg pull-right" type="submit">Finish!</button>
			   <button class="btn btn-primary btnPrevious btn-lg pull-right" type="reset">Previous</button>
            </div>
        </div>
    </div>

<!---------------STEP 3 CLOSED------------->	
</form>
</div>
<!-----------FORM START END--------->
</div>	
</div> 
</div>

＆＃13;

＆＃13;

＆＃13;