admin管理员组文章数量:1323734
I know this is a mon problem here, i already look at all the topics here for a solution, but still, when i change tabs i continue with this problem:
please take a look at my js code:
function initialize() {
//replace 0's on next line with latitude and longitude numbers from earlier on in tutorial.
var myLatlng = new google.maps.LatLng(40.654372, -7.914174);
var myLatlng1 = new google.maps.LatLng(43.654372, -7.914174);
var myOptions = {
zoom: 16,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var myOptions1 = {
zoom: 16,
center: myLatlng1,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
//here's where we call the marker.
//getElementById must be the same as the id you gave for the container of the map
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var map1 = new google.maps.Map(document.getElementById("map_canvas1"), myOptions1);
//google.maps.event.trigger(map1, 'resize');
//map1.setCenter(myLatlng1);
var marker = new google.maps.Marker({
position: myLatlng,
title:"ADD TITLE OF YOUR MARKER HERE"
});
var marker1 = new google.maps.Marker({
position: myLatlng1,
title:"ADD TITLE OF YOUR MARKER HERE"
});
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'<\/div>'+
'<h2 id="firstHeading" class="firstHeading">ADD TITLE HERE<\/h2>'+
'<div id="bodyContent">'+
'<p style="font-size:1em">ADD DESCRIPTION HERE<\/p>'+
'<\/div>'+
'<\/div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
google.maps.event.addListener(marker1, 'click', function() {
infowindow.open(map1,marker1);
});
google.maps.event.addListener(map, "idle", function(){
marker.setMap(map);
});
google.maps.event.addListener(map, "idle", function(){
marker1.setMap(map1);
});
// To add the marker to the map, call setMap();
google.maps.event.addListenerOnce(map, 'idle', function() {
google.maps.event.trigger(map, 'resize');
map.setCenter(myLatlng); // be sure to reset the map center as well
});
google.maps.event.addListenerOnce(map1, 'idle', function() {
google.maps.event.trigger(map1, 'resize');
map1.setCenter(myLatlng1); // be sure to reset the map center as well
});
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = ";callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
i have two maps, one ofr each tab. i could solve the problem of the center point being hide on the left corner with this from other post:
.ui-tabs .ui-tabs-hide { /* my_tabs-1 contains google map */
display: block !important;
position: absolute !important;
left: -10000px !important;
top: -10000px !important;
}
but the problem stated here i had no luck even lookin at other topics here.
I know this is a mon problem here, i already look at all the topics here for a solution, but still, when i change tabs i continue with this problem:
please take a look at my js code:
function initialize() {
//replace 0's on next line with latitude and longitude numbers from earlier on in tutorial.
var myLatlng = new google.maps.LatLng(40.654372, -7.914174);
var myLatlng1 = new google.maps.LatLng(43.654372, -7.914174);
var myOptions = {
zoom: 16,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var myOptions1 = {
zoom: 16,
center: myLatlng1,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
//here's where we call the marker.
//getElementById must be the same as the id you gave for the container of the map
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var map1 = new google.maps.Map(document.getElementById("map_canvas1"), myOptions1);
//google.maps.event.trigger(map1, 'resize');
//map1.setCenter(myLatlng1);
var marker = new google.maps.Marker({
position: myLatlng,
title:"ADD TITLE OF YOUR MARKER HERE"
});
var marker1 = new google.maps.Marker({
position: myLatlng1,
title:"ADD TITLE OF YOUR MARKER HERE"
});
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'<\/div>'+
'<h2 id="firstHeading" class="firstHeading">ADD TITLE HERE<\/h2>'+
'<div id="bodyContent">'+
'<p style="font-size:1em">ADD DESCRIPTION HERE<\/p>'+
'<\/div>'+
'<\/div>';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
google.maps.event.addListener(marker1, 'click', function() {
infowindow.open(map1,marker1);
});
google.maps.event.addListener(map, "idle", function(){
marker.setMap(map);
});
google.maps.event.addListener(map, "idle", function(){
marker1.setMap(map1);
});
// To add the marker to the map, call setMap();
google.maps.event.addListenerOnce(map, 'idle', function() {
google.maps.event.trigger(map, 'resize');
map.setCenter(myLatlng); // be sure to reset the map center as well
});
google.maps.event.addListenerOnce(map1, 'idle', function() {
google.maps.event.trigger(map1, 'resize');
map1.setCenter(myLatlng1); // be sure to reset the map center as well
});
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.google./maps/api/js?sensor=false&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
i have two maps, one ofr each tab. i could solve the problem of the center point being hide on the left corner with this from other post:
.ui-tabs .ui-tabs-hide { /* my_tabs-1 contains google map */
display: block !important;
position: absolute !important;
left: -10000px !important;
top: -10000px !important;
}
but the problem stated here i had no luck even lookin at other topics here.
Share Improve this question asked Sep 28, 2012 at 14:17 user1511579user1511579 1,5376 gold badges27 silver badges42 bronze badges4 Answers
Reset to default 7I found the clean solution:
<script type="text/javascript">
function showAddressMap(){
var mapOptions = {
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
geocoder = new google.maps.Geocoder();
// searchQuery is the address I used this in a JSP so I called with $
geocoder.geocode( {'address': "${searchQuery}"}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
google.maps.event.trigger(map, 'resize');
//}
}
JQ(document).ready(function(){
JQ('#tabs').tabs();
JQ('#maptab').bind('click', function() {
showAddressMap();
});
});
</script>
<div id="tabs">
<li><a href="#tabs-1" id="maptab"><fmt:message key="fieldset.map"/></a></li>
</div>
<div id="tabs-1">
<fieldset>
<div id="map_canvas" style="height:500px; width:100%;"></div>
</fieldset>
</div>
You need to set the center and trigger a re-size event.
MyMap.setCenter(MyCenterCoords);
google.maps.event.trigger(MyMap, 'resize');
This code google.maps.event.trigger(map, 'resize') should be in the pageshow like below.
$('#map_result').live('pageshow',function(event){
google.maps.event.trigger(map, 'resize');
});
By the way, have you found the solutions for this? I actually make it works using css.
I know its not a elegant solution, but you can just add an Iframe inside each tab. and when you click the tab, the map load with the correct sizes.
本文标签: javascriptGoogle Maps Api v3 Maps in UiTabs are cutStack Overflow
版权声明:本文标题:javascript - Google Maps Api v3 Maps in Ui-Tabs are cut - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742118011a2421558.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论