Home/ Questions/Q 7650893
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T11:22:09+00:00

I’m using the javascript API for Google Maps. It’s pretty simple, I just have:

  • 0

I’m using the javascript API for Google Maps. It’s pretty simple, I just have:

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
          function initialize() {
            var myLatlng = new google.maps.LatLng(<?php echo $get_music_spot['music_spot_lat'].', '.$get_music_spot['music_spot_lng']; ?>);
            var myOptions = {
              zoom: 14,
              center: myLatlng,
              mapTypeId: google.maps.MapTypeId.ROADMAP
            }
            var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

            var marker = new google.maps.Marker({
                position: myLatlng, 
                map: map,
                title:"<?php echo $get_music_spot['music_spot_title']; ?>"
            });   
          }
</script>

in the header, then I have <div style="width:600px; height:500px; float:left;" id="map_canvas"></div>
in the body to actually call the map. Then of course I have <body onLoad="initialize()">
This is basically all you need for a basic map. But, because it’s inside jQuery e.g. jQuery UI tabs it goes haywire. Here’s a screenshot:

enter image description here

You can see that only a fragment of the map is shown in the upper left hand corner. Why would this happen and how could I fix this? I implemented the iFrame as a basic embed, but that doesn’t work in IE.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    As for why it’s not working, I couldn’t tell you why. But try using one of the events on the jQuery Tabs widget to initialise the map, such as the show or select event.

    $('#myTabs').tabs({
    show: function(event, ui){

        // check if is "mappanel" and "map" is empty
        if (ui.panel.id == 'mappanel' && $('#map').is(':empty'))
        {
            // load map
            var myOptions = {
                center: new google.maps.LatLng(-34.397, 150.644),
                zoom: 8,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("map"), myOptions);      
        }
    }                    
});

    It’s important to include a check in there so that the map isn’t reloaded every time the map tab (or any other tab) is selected.

    See it working at this jsFiddle.

    • 0