I want to use two(or more) maps on one page.(using telerik Grid)

As you see, If I will try to open "details" for one row(It could be first, second, or last row) map will be displayed correctly. If will try to expand details for another row, map will be displayed not valid. I cannot understand what have I done wrong?

 function onTabSelect(e) {
//...
                    if (node.childNodes.length == 0) {// If Coordinates tab not contain map
                    map = document.createElement('DIV');
                    map.setAttribute('id', selectedGeoObject.Id + "_gmap"); //Generates Id for div container
                    map.setAttribute('style', 'width:400px; height:278px; margin : 0px; padding : 0px;');
                    node.appendChild(map);
                    initMap(map);
                }
}
    function initMap(gMapContainer) {
        var myLatlng = new google.maps.LatLng(51.0, 9.0);
        var myOptions = {
            zoom: 12,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        //width:400px; height:278px;
        var gMap = new google.maps.Map(gMapContainer, myOptions);
        // Can not solve the problem.
        //google.maps.event.trigger(gMap, 'resize');
        //gMap.setCenter(myLatlng);
        return gMap;
    }

If I will try to resize my browser window, both maps will be displayed correctly(I've tried this in Firefox, Opera, Chrome). Could you help me with this strange bug?

I want to use two(or more) maps on one page.(using telerik Grid)

As you see, If I will try to open "details" for one row(It could be first, second, or last row) map will be displayed correctly. If will try to expand details for another row, map will be displayed not valid. I cannot understand what have I done wrong?

 function onTabSelect(e) {
//...
                    if (node.childNodes.length == 0) {// If Coordinates tab not contain map
                    map = document.createElement('DIV');
                    map.setAttribute('id', selectedGeoObject.Id + "_gmap"); //Generates Id for div container
                    map.setAttribute('style', 'width:400px; height:278px; margin : 0px; padding : 0px;');
                    node.appendChild(map);
                    initMap(map);
                }
}
    function initMap(gMapContainer) {
        var myLatlng = new google.maps.LatLng(51.0, 9.0);
        var myOptions = {
            zoom: 12,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        //width:400px; height:278px;
        var gMap = new google.maps.Map(gMapContainer, myOptions);
        // Can not solve the problem.
        //google.maps.event.trigger(gMap, 'resize');
        //gMap.setCenter(myLatlng);
        return gMap;
    }

If I will try to resize my browser window, both maps will be displayed correctly(I've tried this in Firefox, Opera, Chrome). Could you help me with this strange bug?

• javascript
• google-maps-api-3
• telerik-mvc

3 Answers 3

Call this on the window resize:

 google.maps.event.trigger(gMap, 'resize'); 

Like So: ( Note you'll need the gMap handle via document.getElementByID etc )

window.onresize = function(event) {
 google.maps.event.trigger(gMap, 'resize');   
}

You can add this code:

google.maps.event.addListenerOnce(map, 'idle', function() {
    google.maps.event.trigger(map, 'resize');
});

The problem is when you try to initialize a Google Map inside a DIV tag with style.visibility ='hidden'

to solve this, you have to declare the map_canvas div inside a visible DIV, for example:

<div id="MapWindow"> 
    <div id="map_canvas" style="width:390px; height:390px; border-color: black"></div>
</div>

now, if you're using jQuery, in $(function()) you should set 'MapWindow' visibility in hidden (if you want that GMap starts hidden).

<script type="text/javascript">

var map;
var marker;

$(function () {
    initGoogleMap();
    document.getElementById("MapWindow").style.visibility = 'hidden';
});

function initGoogleMap() {
    var latlng = new google.maps.LatLng(-30, -60);
    var options = { zoom: 14, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP};
    map = new google.maps.Map(document.getElementById("map_canvas"), options);
    marker = new google.maps.Marker({
        draggable: false,
        position: latlng,
        map: map,
        title: ''
    });
}

function OpenPopupWindow()
    document.getElementById("MapWindow").style.visibility = 'visible';
    $('#MapWindow').data('tWindow').center().open();        
}

</script>

Finally, when you wan to show de DIV (or popup window, for example), before show it, you have to set the DIV visibility in 'visible'

;)