Grey area in Google Maps (Joomla 3+)

Question

Good afternoon,

I'm trying to implement a Google Maps inside my SobiPro entries (SobiPro is a directory component for Joomla) but it's not working properly. My map is showing some parts with a grey color and after searching and finding a lot of solutions, I need you to ask for help because any of the other solutions worked.

I have tried everything and it's still not working.

Here is the URL, in the third label you will find my map "Direccion" is called: http://bdebeauty.es/component/sobipro/268

What can I do to solve this problem?

Edit with more code:

<style>
#map-canvas {
    margin: 0px;
    padding: 0px;
}
</style>

<script>
function initialize2() {

    var myLatlng = new google.maps.LatLng(-25.363882,131.044922);

    var mapOptions = {
        zoom: 4,
        center: myLatlng
    }

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

    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: 'Hello World!'
    });
}

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

</script>

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

Thanks in advance.

Answer 1

I think what you will need is something like google.maps.event.trigger(map, 'resize');

as it is said in the documentation,

Developers should trigger this event on the map when the div changes size: google.maps.event.trigger(map, 'resize') .