Support » Plugins » Hacks » Creating a Google Maps plugin with API vs3

  • sdls


    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:

    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() {
    			__( 'Map', 'post_textdomain' ),
    	// 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">
    		    <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>

    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 = {
    					  mapTypeId: google.maps.MapTypeId.ROADMAP
    					map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
    				  function codeAddress() {
    					var address = query;
    					geocoder.geocode( { 'address': address}, function(results, status) {
    					  if (status == google.maps.GeocoderStatus.OK) {
    						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 = "";
    				  window.onload = loadScript;	
    		 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:

    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



Viewing 1 replies (of 1 total)
  • I notice your id selectors are inconsistent:

    Please enter country and update to preview Google Map
    			<div id="mapcanvas" sty></div>


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

    Are you getting a javascript error or just a displaying error from the CSS?

Viewing 1 replies (of 1 total)
  • The topic ‘Creating a Google Maps plugin with API vs3’ is closed to new replies.