Yii render and renderPartial : Google maps not showing correctly

Question

I am using Yii framework for my application and I have a this code below to initialize and show a simple google map with a layer I created in google maps engine.

<script>
    function initialize() {
        initialize2();
      var mapOptions = {
        zoom: 14,
        center: new google.maps.LatLng(14.154136802513362 ,121.26339912414551),
        mapTypeId: google.maps.MapTypeId.HYBRID
      };

      var map = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);

      var mapsEngineLayer = new google.maps.visualization.MapsEngineLayer({
        layerId: '07732892464132847854-09507073323105492707',
        map: map
      });

    }

    google.maps.event.addDomListener(window, 'load', initialize);

</script>
<div id="map-canvas" style="width:600px;height:600px;" ></div>

But my problem lies in the way it is rendered. When I use the yii renderPartial(), this is what this looks like :

There is no problem here, the layer is fully shown and the window is complete. But I need to render it using the render() method because I need my themes, the navigations and other features of my application basically. But this is what ppears when I use the render() method :

The tools on the left (zoom and pan buttons are not rendered properly, like clipped), and the layer doesn't appear, when I zoom in further I get this :

The layers are kind of twisted, and plain wrong.

These run on the same code. The only difference is I render one using render() and the one displaying correctly is the renderPartial(), but I need to render it using the render() method.

This is really getting weird. Am I missing something with the render() and renderPartial() method? Help. Thanks!

Answer 1

Try this

       <style>
            #map-canvas img
            {
                max-width: none;
            }
        </style>

You use bootstrap 2? https://github.com/twbs/bootstrap/issues/1552