admin管理员组文章数量:1327488
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?
Share Improve this question edited Jul 3, 2011 at 12:38 Trott 70.2k27 gold badges182 silver badges217 bronze badges asked Jul 3, 2011 at 9:07 LeonidLeonid 1,1112 gold badges17 silver badges27 bronze badges3 Answers
Reset to default 4Call 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'
;)
本文标签: javascriptDisplays only part of map API V3 problemStack Overflow
版权声明:本文标题:javascript - Displays only part of map API V3 problem - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742200034a2431746.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论