Google Maps API vs3을 Wordpress 플러그인에 통합 하시겠습니까? - 너무 가까이

Question

API vs3을 사용하여 Google Maps 플러그인을 만드시겠습니까? 안녕 코더! 몇 시간 동안 웹을 수색 한 후에는 새 버전 3 기능을 Wordpress 사이트에 통합하는 것에 대한 결정적인 기사를 찾을 수 없습니다. 여기에 달성하고자하는 바가 있습니다 ...

1. 간단한 게시물 메타를 통해 관리자의 "국가 이름"을 수집하는 플러그인을 만듭니다. 2)지도는,

그래서 우선 구글지도의 관리자에게 미리보기를 제공 지오에게 우리가 무엇을 heres 작업 예제를 구글지도 3)의 적절하게 확대 된 버전을 국가 이름 떠난을 반대합니다 정적 파일로 원한다면 : http://simondelasalle.com/file_drop/google-map-example.htm

모두 좋다 ... 올바른 차원에서 캔버스를 잡아 당긴다. 소스를 끌어 올리면 body onload를 꺼내서 window.onload = loadScript로 바꿈으로써 WordPress의 통합을 위해 이미 이것을 조금 준비했습니다.

거의 작동하지만 실제로는 미세 조정에 도움이 필요합니다.

1 관리 상자 국가를 업데이트하고 관리자가 Google지도를 미리보기위한 관리 메타 상자가 있습니다. * note 필드 자체를 업데이트하는 기능은 아래에 포함되어 있지 않습니다.

'

// add meta box 
add_action('add_meta_boxes', 'post_map'); 

// add meta box to post type 
function post_map() { 
    add_meta_box( 
     'post_map_tab', 
     __('Map', 'post_textdomain'), 
     'map_tab_box', 
     'post' 
    ); 
} 

// print box content 
function map_tab_box($post) { 
    // Use nonce for verification 
    // wp_nonce_field(plugin_basename(__FILE__), 'post_map_noncename'); 
    // The actual fields for data entry 
    ?> 
    <table border="0" align="center" cellpadding="5" cellspacing="0" class="customfieldtable"> 

     <tr> 
     <td align="right">Country or Region<br /> 
    (This is to GeoCode Map the location using Google)</td> 
     <td><input name="geoecode_country" type="text" value="<?php echo get_post_meta($post->ID, 'geoecode_country', true); ?>" size="30" /></td> 
     <td rowspan="3">&nbsp;</td> 
     <td width="400" rowspan="4" valign="top"> 
     Please enter country and update to preview Google Map 
     <div id="mapcanvas" sty></div> 
     </tr> 

    </table> 

    <?php 
} 

'

2의 neccesary 스크립트를로드하여 플러그인 CSS

`

#map_canvas { 
    width: 400px; 
    height: 400px; 
} 

`

3에 스타일을 추가 관리자 페이지에서 미리보기 (플러그인 및 API 키의 자리 표시 자 사용자 정의). 우리가 고통스러운 일에 가까운 동적 값

'

function print_google_map_script() { 

     // we could load conditionally by page if we want here 
     global $post; 
      $geoecode_country = get_post_meta($post->ID, 'geoecode_country', true); 
     ?> 

     <script type='text/javascript'> 

       var geocoder; 
       var map; 
       var query = '<?php echo $geoecode_country; ?>'; 
       function initialize() { 
       geocoder = new google.maps.Geocoder(); 
       var mapOptions = { 
        zoom:3, 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       } 
       map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); 
       codeAddress(); 
       } 

       function codeAddress() { 
       var address = query; 
       geocoder.geocode({ 'address': address}, 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); 
        } 
       }); 
       } 

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

       window.onload = loadScript; 

     </script> 
     <?php 

    } 

    add_action('admin_head', 'print_google_map_script'); 

'

로 교체 할 수 있도록 이것은 admin_head에 중독된다. 그래서지도가 다소로드됩니다 .... 만약 당신이 거기 앉아서 몇 번 새로 고침을하면, 결국은 효과가있는 것처럼 보입니다. 그러나 편집 게시물 페이지를 처음로드 할 때지도가 캔버스 내부에서 위로 잡아 당겨 지거나 부정확 한 확대/축소 수준이 발생합니다. 화면은 다음과 같습니다. http://www.simondelasalle.com/file_drop/screen.jpg

어쩌면 스크립트가로드되는 방식입니까? API가 캔버스 너비를 인식하는 것 같지 않습니다.

제공 할 수있는 의견이나 의견은 크게 평가 될 것입니다.

고마워요!

S.

Answer 1

문제는 METABOX 페이지에 추가되어 표시된다는 점이다 (따라서 너비/높이 주어진) 맵이 그려진 후에.페이지가로드 된 후에는 새로지도를 알려줄 필요가 :

$(window).load(function() { 
    google.maps.event.trigger(map, "resize"); 
}); 

더 나쁜하는 METABOX 사용자에 의해 숨겨져있을 수 있습니다, 다음 나중에 밝혀; 예를 들어, 한 페이지/게시물을 편집 할 때 메타 버튼을 숨기고 다른 페이지/포스트를 편집 할 때이를 나타낼 수 있습니다. 운좋게도 WP는 대사 산물이 보여 졌을 때 알려주는 훅을 제공하므로이 역시 처리 할 수 ​​있습니다.

postboxes.pbshow = function() { 
    google.maps.event.trigger(map, "resize"); 
};