Integrating Google Maps API vs3 into a WordPress plugin? – so close

Creating a Google Maps plugin with API vs3? Hi there coders! After scouring the web for hours, cannot find a definitive article on integrating the new version 3 functionality into a wordpress site. Here’s what I’m hoping to achieve…

1.) Create a plugin that collects a “Country Name” in the admin via simple post meta.
2.) The map will reverse geocode the country name pullin up a properly zoomed version of that google map
3.) Provide a preview to admin of the Google map

So first off, heres a working example of what we want as a static file:
http://simondelasalle.com/file_drop/google-map-example.htm

All good… pulls the canvas at the right dimension, zooms it… sweet. If you pull up the source you’ll notice I’ve already prepped this a bit for wordpress integration by taking out the body onload and replacing with window.onload = loadScript;

This almost works, but really need some help fine tuning.

1 Admin Box
Heres the admin meta box for updating the country and previewing the google map in the admin. *note The function for updating the fields themselves is not included below.

‘

// 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 Add styles into your plugin CSS

`

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

`

3 Loading the neccesary scripts in the head to preview in admin page (customize placeholders for your plugin and API key). This is hooked into admin_head so we can replace with dynamic values

‘

    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');

‘

So close to working it’s painful. So the map loads kinda…. if you sit there and refresh a few times, it seems to eventually work. However when you first load the edit post page you get the map crunched up inside the canvas, as well as an incorrect zoom level. Here’s a screen:
http://www.simondelasalle.com/file_drop/screen.jpg

Maybe the way the scripts are loaded? Doesn’t seem like the API is recognizing canvas width.

Any suggestion or feedback you could provide would be greatly appreciated

Thanks!

S.