SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Zealot
    Join Date
    Nov 2007
    Posts
    126
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jquery tabs and google map issue

    Hi,

    I have some tabbed content on my page. One of the tabs has a Google map in, but when I select that tab, the map only half loads.


    This is the map code I have:

    PHP Code:

    jQuery
    (function($) {
     
    // Asynchronously Load the map API 
        
    var script document.createElement('script');
        
        
    document.body.appendChild(script);
    });
    function 
    initialize() {
        var 
    myLatlng = new google.maps.LatLng(53.36188,      -2.27084);
        var 
    mapOptions = {
            
    zoom9,
            
    centermyLatlng,
            
    mapTypeIdgoogle.maps.MapTypeId.ROADMAP
        
    };
        var 
    map = new google.maps.Map(
                
    document.getElementById('map-canvas'), mapOptions);
        
    map.setTilt(45);

        var 
    bounds = new google.maps.LatLngBounds();
        var 
    SW = new google.maps.LatLng(53.36188,      -2.27084);
        var 
    NE = new google.maps.LatLng(53.36188,      -2.27084);
        
    bounds.extend(SW);
        
    bounds.extend(NE);
        

        var 
    infowindow = new google.maps.InfoWindow({
        
    content"<div class='info_content_airport'><strong>Airport</strong></div>",
        
    position: new google.maps.LatLng(53.36188,      -2.27084),
        
    pixelOffset: new google.maps.Size(0, -40),
        
    maxWidth300
        
    });
        
    infowindow.open(map);


        var 
    markers = [
            [
    'Airport'53.36188,      -2.27084]
        ];

        
        var 
    infoWindowContent = [
            
    '<div class="info_content_airport">' '<strong>Airport</strong>' '</div>'
           
      
        
    for (0markers.lengthi++ ) {
            var 
    position = new google.maps.LatLng(markers[i][1], markers[i][2]);
            
    marker = new google.maps.Marker({
                
    positionposition,
                
    mapmap,
                
    titlemarkers[i][0]
            });
            
    addInfoWindow(markerinfoWindowContent[i], map);
        }
        
    map.fitBounds(bounds);

        
    // Override our map zoom level once our fitBounds function runs 
        // (Make sure it only runs once)
        
    var boundsListener google.maps.event.addListener(
            (
    map), 'bounds_changed', function(event) {
                
    this.setZoom(11);
                
    google.maps.event.removeListener(boundsListener);
        });
    }
    function 
    addInfoWindow(markermessagemap) {
        var 
    infoWindow = new google.maps.InfoWindow({
            
    contentmessage,
            
    maxWidth300
        
    });
        
    google.maps.event.addListener(marker'click', function () {
            
    infoWindow.open(mapmarker);
            
    marker.setAnimation(google.maps.Animation.BOUNCE);
            
    setTimeout(function(){ marker.setAnimation(null); }, 2250);
        });
    }
    google.maps.event.addDomListener(window'load'initialize);
    initialize();

    //<![CDATA[ 
    and this is the JS i have in my head:

    PHP Code:
    <script type="text/javascript" src="maps.js"></script>
    <script type="text/javascript" src="hashtabs.js"></script>

    <script type="text/javascript">

        $(document).ready(function(){
            $(".tabs").accessibleTabs({
                tabhead:'h2',
                fx:"fadeIn",
                autoAnchor:true
            });
            $(".prod-tabs").accessibleTabs({
                tabhead:'h2.tabhead"',
                fx:"fadeIn",
                autoAnchor:true
            });
            
            
        });
        
                            
        $(document).ready(function() {

            // click event listener
            $('.hash').click(function(event) {
                // get the id
                var clickedLink = $(this).attr('id');
                // push it into the url
                location.hash = clickedLink;
                // stop the regular href
                event.preventDefault();
            });
            
            
        });
        
        
    /* <![CDATA[ */
    $(document).ready(function(){
        $("#product-tabs li").click(function() {
            //    First remove class "active" from currently active tab
            $("#product-tabs li").removeClass('active1');

            //    Now add class "active" to the selected/clicked tab
            $(this).addClass("active1");

            //    Hide all tab content
            $(".product-tab-content").hide();

            //    Here we get the href value of the selected tab
            var selected_tab = $(this).find("a").attr("href");

            //    Show the selected tab content
            $(selected_tab).fadeIn(100);
            
            //    At the end, we add return false so that the click on the link is not executed
            return false;
            
            
            
            
        }); 
    Any ideas what I have wrong and why it is only half loading?

    Thanks!

  2. #2
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,412
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    I've come across this problem before. If I remember correctly, it's because the map is being initialized on a hidden tab and what you have to do is only init the map on the first time the map tab is activated.
    "There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies."

  3. #3
    SitePoint Zealot
    Join Date
    Nov 2007
    Posts
    126
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply.

    What would be the best way to do this?

    I am currently calling theses in the following order:

    - jQuery
    - https://maps.googleapis.com/maps/api...
    - my map code
    - my tab code
    - htmlt to output the map

    Thanks!

  4. #4
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,412
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    Comment out the following lines from your map code:

    Code JavaScript:
    // google.maps.event.addDomListener(window, 'load', initialize); 
    // initialize();

    and then, where you set up your tab click handler:

    Code JavaScript:
    var mapLoaded = false;
     
    $("#product-tabs li").click(function() { 
            // Code omitted ...
     
            var selected_tab = $(this).find("a").attr("href");
     
            $(selected_tab).fadeIn(100);
     
            if (selected_tab == 'yourMapTabUrlHere' && mapLoaded === false) {
                initialize();
                mapLoaded = true;
            }
     
            return false; 
    });
    "There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies."

  5. #5
    SitePoint Zealot
    Join Date
    Nov 2007
    Posts
    126
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, but it didn't work

    I assume the yourMapTabUrlHere would be the id of my tab?

    This is the HTML I have for the tabs:


    PHP Code:

     
    <div class="prod-tabs">
                <
    h2 class="tabhead" id="map">Map</h2>
                <
    div class="tabbody">
                  <
    div class="map" >
                    <
    div id="map-canvas" style="width: 720px; position: absolute; height: 400px;"></div>
                  </
    div>
     </
    div

  6. #6
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,412
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by ebsolutions View Post
    Thanks, but it didn't work

    I assume the yourMapTabUrlHere would be the id of my tab?
    Going by the JS from your first post I thought there would be an anchor tag, but there isn't one in the code you just posted. Is it possible for you to share either a link to, or the code for the page in question, so I can see the whole thing in context and try it out?
    "There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies."

  7. #7
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,107
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi, can you please try this, put width and height to the parent div of your map

    HTML Code:
    <div style="width: 100%; height: 100%">
        <div id="map-canvas" style="width: 100%; height: 100%;"></div>
    </div>

  8. #8
    SitePoint Zealot
    Join Date
    Nov 2007
    Posts
    126
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jemz View Post
    Hi, can you please try this, put width and height to the parent div of your map

    HTML Code:
    <div style="width: 100%; height: 100%">
        <div id="map-canvas" style="width: 100%; height: 100%;"></div>
    </div>
    Thanks - I tried that, but it didn't work.

    The <h2> tags create <a> link like:

    PHP Code:
    <class="hash" href="#accessibletabscontent1-4" id="map"><span class="current-info"></span>Map</a
    I tried adding "#accessibletabscontent1-4" to the code like this, but it didn't work:

    PHP Code:
    if (selected_tab == '#accessibletabscontent1-4' && mapLoaded === false) {
                
    initialize();
                
    mapLoaded true;
            } 

  9. #9
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,107
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    did not display the map when you click your tab?

  10. #10
    SitePoint Wizard
    Join Date
    May 2012
    Posts
    1,107
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    did you included this in your header section

    Code:
     <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    also try to remove your absolute

    HTML Code:
    <div style="width: 100%; height: 100%;">
        <div id="map_canvas" style="width: 50%; height: 50%;"></div>
    </div>
    if still not working


    try to call your initilize function on the body like this

    HTML Code:
    <body onload="initialize()">

    hope this helps.

  11. #11
    SitePoint Zealot
    Join Date
    Nov 2007
    Posts
    126
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, but those didn't work either

    Strangley, it works if I have firebug open :|

  12. #12
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,412
    Mentioned
    45 Post(s)
    Tagged
    12 Thread(s)
    As I said before, if you can share a link, or perhaps recreate the problem in jsFiddle or something then it'll be easier for us to try and solve the problem.
    "There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies."


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •