Google지도 API v3 두 번째지도 크기 조정 및 센터

Question

나는 wordpress에 삽입 된지도를 잊어 버렸고 google maps api v3으로 이동했습니다. 그래서, 나는이 사용하고 있습니다

<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=true"></script> 

이 기능을 : 당신이 볼 수 있듯이, 선언이지도는

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(30.654372, -6.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 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); 
});  

    // To add the marker to the map, call setMap(); 
    marker.setMap(map); 
    } 

    function loadScript() { 
    var script = document.createElement("script"); 
    script.type = "text/javascript"; 
    script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize"; 
    document.body.appendChild(script); 
    } 

    window.onload = loadScript; 

있다. 나는 나의 웹 사이트, 가로지도를 보여주는지도 사이에서 교체하기 위하여 탭을 사용하고있다.

문제는 여기에있는 다른 주제에서 발견되었지만 해결 방법은 작동하지 않는 것 같습니다. 당신이 라인에서 볼 수 있듯이 내가 주석 :

//google.maps.event.trigger(map1, 'resize'); 

//map1.setCenter(myLatlng1);

이 코드는 두 번째 맵을 가운데 맞추기 위해 작동하지 않습니다. 지도가 div에 올바르게 맞지 않아 센터 아이콘이 왼쪽 모서리에 있는데, 일반적인 문제입니다.

나는 당신이 이미 문제가 무엇인지 알 것 같지만 사진이 필요할 경우 문제없이 제공 할 것입니다. 탭 코드는 워드 프레스에 보이는 방법

:가

$('#tabs').bind('tabsshow', function(event, ui) { 
    if (ui.panel.id == "tab-map-2") { 
     google.maps.event.trigger(map1, 'resize'); 
     map1.setCenter(myLatlng1); 
    } 
}); 

#tabs :

[wptabs type="accordion" mode="horizontal"] 

[wptabtitle] Portugal[/wptabtitle] [wptabcontent] 

<div id="map_canvas" style="width: 100%; height: 300px; border: 1px solid;"></div> 
[/wptabcontent] 

[wptabtitle] Brasil[/wptabtitle] [wptabcontent] 

<div id="map_canvas1" style="width: 100%; height: 300px; border: 1px solid;"></div> 

[/wptabcontent] 

[/wptabs] 

Answer 1

좋아,이 플러그인은 다음과 같은 일을 할 수 jQuery UI 사용하는 것 div ID 외부 및 tab-map-2은 두 번째지도의 탭 패널 ID입니다.

희망이 도움이됩니다.