jquery - Embedding Google Maps in a page: Map invisible although present in HTML

Question

I am trying to embed a Google Map in my local dev environment (WAMP), using http://code.google.com/p/jquery-ui-map/ .

I've loaded all scripts needed:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script><script src="http://maps.gstatic.com/intl/en_ALL/mapfiles/api-3/10/22/main.js" type="text/javascript"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="/app_dev.php/js/fcc600e_part_1_jquery.ui.map.full.min_1.js"></script>
<script type="text/javascript" src="/app_dev.php/js/fcc600e_part_1_myscript_2.js"></script>
<script>
      $('#map_canvas').gmap().bind('init', function(ev, map) {
        $('#map_canvas').gmap('addMarker', {'position': '57.7973333,12.0502107', 'bounds': true}).click(function() {
            $('#map_canvas').gmap('openInfoWindow', {'content': 'Hello World!'}, this);
        });
    });
</script>

of course I have put an empty <div id="map_canvas"></div> in my HTML before the script call.

The function is executed, no console errors at all. I see the html inside "#map_canvas" but the map is placed somewhere outside the viewport, towards the top, and is completely invisible. (seems to be inline CSS telling it to position absolutely..)

Here is the rendered HTML: http://pastebin.com/V2cMt4Kr

Here's an actual live link with the code I use: http://www.isawu.eu/index.html

Answer 1

I guess that you have not put any css code for your map container. Check my example : http://jsfiddle.net/Ywknf/12/

All the maps that are positioned within CSS (inline or not) are visible except the last one (#map_canvas3)

        <div id="map_canvas"></div>
        <div id="map_canvas1"></div>
        <div id="map_canvas2" style="width:400px; height:300px;"></div>
        <div id="map_canvas3"></div> <!--invisible -->

Καλ? συν?χεια στην προσπ?θεια