Google Maps API and JQuery Form wizard conflicts

Question

I'm trying to use google map API with Jquery form wizard, whenever I use form wizard map turns grey.its disappears ( " in Firefox map displays if i got firebug").

whenever I load map independently it shows but whenever, I go for Map with tabs i.e form wizard map fade out grey

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 form Wizard code

$(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');

});

/*-------------------- 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');

});

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%; }

<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>

Yes , when i run it independently it works properly, but when form wizard code is inserted it turns Grey — Siddharth Aklujkar, Sep 14 '15 at 12:25
take a look at this - http://stackoverflow.com/questions/9458215/google-maps-not-working-in-jquery-tabs You need to trigger the `map resize` when the tab is selected. — user2959229, Sep 14 '15 at 12:26
Try re-arranging your code so the `map` variable is accessible when the tab is triggered (ie: available in a wider scope). That will allow you to do the `resize` which should get the map to display correctly. — user2959229, Sep 14 '15 at 12:34
Can you create a fiddle for this, and please confirm if the behaviour is as this fiddle http://jsfiddle.net/johntough/nc0u7h2c/5/? — Anand G, Sep 14 '15 at 13:22

Google Maps API and JQuery Form wizard conflicts

0 Answers0