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.

score 0 · Accepted Answer · answered May 14 '15 at 15:21

0

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') .

answered May 14 '15 at 15:21

kaho

4,746
1
16
24

Where I have to put that code? I tried in every line and it didn't work. Thanks @kaho – Jordi Gámez May 14 '15 at 15:23
Where your 3rd page is displayed. – kaho May 14 '15 at 15:24
I have posted my map code, it's running in a .XSL file. – Jordi Gámez May 14 '15 at 15:27
I would try to... take out the `var` in the `var map = new google.....` in your `initialize2 ` to make `map` a globe reference. Then I will try to write something like `onclick="google.maps.event.trigger(map, 'resize');` in your `tab_map a tag`, or use some kind of [event listener](http://www.w3schools.com/jsref/met_element_addeventlistener.asp) to trigger that. – kaho May 14 '15 at 15:33
The map displays correcty, but it's not a solution because the user has to click on the tab twice to solve the problem, and when the user changes the tab and returns, the map is still again the same problem. Any other ideas? Thanks @kaho – Jordi Gámez May 14 '15 at 15:57
Huh, then I guess the `tab_map` might not be the best place to place this code. It would be the best if you can place it right after you make the page visible. – kaho May 14 '15 at 16:19
yea, onload would not work, since they load it in background. – kaho May 14 '15 at 16:26

Grey area in Google Maps (Joomla 3+)

1 Answers1