화면 중앙에 Google지도를 중앙에 배치하는 방법은 무엇입니까?

Question

gmap3을 사용하여 Google지도를 기반으로하는 사이트가 있습니다. gmap3에는 마커와 그 위의 플로팅 위젯이 있으며 활성 마커에 대한 텍스트가 들어 있습니다. 이 플로팅 위젯은 화면의 절반 정도를 차지합니다. 지도는 자동으로 활성 마커의 중앙에 배치됩니다 (또는 이동됩니다).

위에서 보았 듯이 화면 가운데의 활성 마커는 텍스트 위젯 (화면의 거의 모든 왼쪽면을 포함)의 오른쪽에 매우 가깝습니다. 나는 더 느슨하게하고 싶다 - 화면의 중심이 아니라 왼쪽에서 약 2/3, 오른쪽에서 1/3 (수평으로, 물론 수직으로 중심에 있어야한다).

다른 말로하면, 새로운 마커가 활성으로 선택되면지도가 화면의 오른쪽에서 화면 너비의 약 1/3에 해당 위치로 이동해야합니다 .

지도의 중심 거리를 변경하면 확대/축소 수준에서 작동하므로 도움이되지 않습니다. "panTo (너비 : 66 %, 높이 : 50 %)"와 같은 것이 필요합니다 (물론 실제 코드가 아닙니다).

미리 감사드립니다. 당신은지도-옵션의 이벤트 속성을 사용할 수 있습니다 gmap3를 들어

map.panBy(-Math.floor(map.getDiv().offsetWidth/6),0) 

그것을 적용 :

(  function($){ 
    var $et_main_map = $('#et_main_map'); 

    et_active_marker = null; 

    $et_main_map.gmap3({ 
     map:{ 
      options:{ 
<?php 
while (have_posts()) : the_post(); 
$et_location_lat = get_post_meta(get_the_ID(), '_et_listing_lat', true); 
$et_location_lng = get_post_meta(get_the_ID(), '_et_listing_lng', true); 

      if ('' != $et_location_lat && '' != $et_location_lng) 
       printf('center: [%s, %s],', $et_location_lat, $et_location_lng); 

break; 
endwhile; 
rewind_posts(); 
?> 

          zoom: <?php 
         if (is_home() || is_front_page()) 
          echo esc_js(et_get_option('explorable_homepage_zoom_level', 3)); 
         else 
          echo esc_js(et_get_option('explorable_default_zoom_level', 5)); ?>, 
       mapTypeId: google.maps.MapTypeId.<?php echo esc_js(strtoupper(et_get_option('explorable_map_type', 'Roadmap'))); ?>, 
       mapTypeControl: false, 
       mapTypeControlOptions: { 
        position : google.maps.ControlPosition.LEFT_CENTER, 
        style : google.maps.MapTypeControlStyle.DROPDOWN_MENU 
       }, 
       streetViewControlOptions: { 
        position: google.maps.ControlPosition.LEFT_CENTER 
       }, 
       navigationControl: true, 
       scrollwheel: false, 
       streetViewControl: false, 
       zoomControl: true, 
            zoomControlOptions: { 
        position: google.maps.ControlPosition.RIGHT_BOTTOM, 
              style: google.maps.ZoomControlStyle.SMALL 
       }, 
      } 
     } 
    }); 

Answer 1

먼저 오프셋 적용 panBy()를 사용하여, 지정된하는 LatLng에서지도를 중심으로하고 있습니다 : 다음 코드를 추가

 events:{ 
     idle:function(map){ 
      google.maps.event.clearListeners(map,'idle'); 
      map.panBy(-parseInt(this.width()/6),0); 
     } 
     }, 

바로

후