使用JavaScript的Google地图无法在jQuery标签中正确显示

Question

I have 3 tabs created using jQuery and CSS like

Location tabs containing Google Maps are not displayed. Where is the problem?

<div id="map_canvas" style="width:500px;height:360px;border:1px solid #333333;"></div>

This div is inside a jQuery tab (Location) the code is:

    <div class="detail_tab_left">           
        <section class="tabs">
            <input id="tab-1" type="radio" name="radio-set" class="tab-selector-1" checked="checked" />
            <label for="tab-1" class="tab-label-1">Amenities</label>

            <input id="tab-2" type="radio" name="radio-set" class="tab-selector-2" />
            <label for="tab-2" class="tab-label-2">Specification</label>

            <input id="tab-3" type="radio" name="radio-set" class="tab-selector-3" />
            <label for="tab-3" class="tab-label-3">Location  </label>
            <div class="clear-shadow"></div>

            <div class="content">            


                 <div class="content-1" style="overflow: scroll; overflow-x: hidden; width:731px;">

                    <?php if($get_aminities){
                    foreach($get_aminities as $val)
                    {

                    ?> 
                                                      <?=$val['feature_value'] ?>
                         <?php }}else{ ?>
                          <div style="font-family:lato; font-size:14px; color:#333334;"> No AMENITIES! </                              div>
                         <?php } ?>
                </div>              


              <div class="content-2" style="overflow: scroll; overflow-x: hidden; width:731px;">
                <?php if($get_specification){
                 foreach($get_specification as $val_specification)
                 {

                ?>
               <div style="font-family:lato; font-size:14px; color:#333334;line-height:23px; "><?=$val_specification['feature_value'] ?>.</div>
               <?php } }    else {?> 
               <div style="font-family:lato; font-size:14px; color:#333334;">NO SPECIFICATION</div>
               <?php } ?>   
             </div>

                <div class="content-3">

            <?php 
            $location=substr($value['property_location'],1,-1);
            if($location){
                $val_loc=explode(",","$location");
            }

            //print_r($val_loc);
            ?>
            <input type="hidden" id="latitude" name="latitude" value="<?=$val_loc['0']?>">
            <input type="hidden" id="longitude" name="longitude"  value="<?=$val_loc['1']?>">
            <input type="hidden" id="map_title" name="map_title"  value="<?=$value['property_type']." ".$value['property_listing_type']." at ".$value['property_city']?>">
            <input type="hidden" id="map_price" name="map_price"  value="<?=$total_price?>&nbsp;<?=$total_price_unit?>">
            <input type="hidden" id="map_location" name="map_location"  value="<?=$value['property_city']?>">

            <div id="map_canvas" style="width:1042px;height:360px;border:1px solid #333333;display: block;"></div>
            <script language="javascript">
            var myLatlng = new google.maps.LatLng($('#latitude').val(),$('#longitude').val());
            var myOptions = {
            zoom: 13,
            center: myLatlng,
            scrollwheel: false,
            mapTypeId: google.maps.MapTypeId.ROADMAP
            }           


            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
            var marker = new google.maps.Marker({
            draggable: false,
            position: myLatlng, 
            map: map,
            title: 'Property Location'
            });
            var contentString = '<div style="line-height:20px;font-size:11px;padding-top:5px"><div align="left"><b>'+$('#map_title').val()+'</b></div>';
            contentString += '<div align="left">Total Price: '+$('#map_price').val()+'</div>';
            contentString += '<div align="left">Location: '+$('#map_location').val()+'</div>';
            var contentString = contentString;
            var infowindow = new google.maps.InfoWindow({
            content: contentString
            });
            google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map,marker);
            });
                </script>   
                        </div>


            </div>
        </section>
 </div>

Can anyone please help me out?

Answer 1

Please correct the following mistake hope that will solve your problem.

define map varialbe as below at the starting of script

1) var map= null;

2) you are using map object before it is created.

google.maps.event.trigger(map, 'resize'); map.setZoom( map.getZoom() );

put the above code after following line

map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);