여러 Google지도가 단일 페이지에 표시되지 않습니다.

Question

하나의 페이지에 여러 Google지도를 표시하는 것과 관련하여 여러 가지 게시물을 읽었지만 Google지도 API V3을 사용하는 내 코드와 관련이없는 것으로 보입니다.

동일한 페이지에 있지만 다른 탭에 2 개의 Google지도가 있습니다. Map1 코드를 복사하여 두 번째 탭에 붙여 넣어 Map2를 작성했습니다. 그런 다음 Map2에 대한 "var 맵"과 "map_canvas"id를 변경했지만 게시하면 Map2 만 페이지에 표시됩니다.

줄을 삭제하는 옵션을 시도했습니다. 이 같은 페이지에 반복되지 않은,하지만 작동하지 않았다 있도록 2 탭에서

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 

.

페이지

여기에서 볼 수 있습니다 : 2 개 개의 서로 다른 맵이 탭 "우리의 선교사"와 "국제 협력"에 표시되어 있습니다 http://tcchurch.com.au/table1/index.php/missions

.

도움이 될 것입니다. 감사.

이안

Answer 1

중복 기능이 있습니다. 그것도 작동하지 않을 것이다, 그들에게 고유 한 이름을 주거나, 두 맵을 초기화하는 하나의 초기화 함수를 가져라.

function initialize() { 
    var latlng = new google.maps.LatLng(0, 40); 
    var settings = { 
     zoom: 2, 
     center: latlng, 
     mapTypeControl: true, 
     mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}, 
     navigationControl: true, 
     navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL}, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 
var map = new google.maps.Map(document.getElementById("map_canvas"), settings); 
.... 
} 

function initialize() { 
    var latlng = new google.maps.LatLng(0, 40); 
    var settings = { 
     zoom: 2, 
     center: latlng, 
     mapTypeControl: true, 
     mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}, 
     navigationControl: true, 
     navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL}, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 
var map2 = new google.maps.Map(document.getElementById("map_canvas2"), settings); 
... 
} 

Answer 2

뿐만 아니라 다른 기능뿐만 아니라 전역 변수에 이름을 부여 - 구걸에서 "VAR"없는 변수 :

에 게시 ID를 할당 :처럼 "codeAddress을", "지도" "초기화"와 이 (슈퍼 깨끗한 아니지만 작품) :

var geocoder; 
    var map; 

    function codeAddress<? echo $post['Post']['id']; ?>() { 
     var address = "<? echo h($post['Post']['address']); ?>, <? echo h($post['Post']['ZIP']); ?> <? echo $cities[$post['Post']['city_id']]; ?>"; 
     geocoder.geocode({ 'address': address}, function(results, status) { 
     if (status == google.maps.GeocoderStatus.OK) { 
      map<? echo $post['Post']['id']; ?>.setCenter(results[0].geometry.location); 
      var marker = new google.maps.Marker({ 
       map: map<? echo $post['Post']['id']; ?>, 
       position: results[0].geometry.location 
      }); 
     } else { 
      alert('Geocode was not successful for the following reason: ' + status); 
     } 
     }); 
    } 

    function initialize<? echo $post['Post']['id']; ?>() { 
     geocoder = new google.maps.Geocoder(); 
     var latlng = new google.maps.LatLng(-34.397, 150.644); 
     var mapOptions = { 
     zoom: 14, 
     center: latlng 
     } 
     map<? echo $post['Post']['id']; ?> = new google.maps.Map($('googleMap<? echo $post["Post"]["id"]; ?>'), mapOptions); 
     codeAddress<? echo $post['Post']['id']; ?>() 
    } 

    google.maps.event.addDomListener(window, 'load', initialize<? echo $post['Post']['id']; ?>);