Question

I’m trying to implement this example http://jsfiddle.net/gzF6w/1/ (from another question here on stak) on a wordpress plugin ( metabox on posts ).

For some reason the box don’t display the map as it should.

Here is my code so far

// Put the script on the head after jQuery is loaded        
function map_script_one($hook) {
        wp_deregister_script('googlemapsapi3');
        wp_enqueue_script('googlemapsapi3', 'http://maps.google.com/maps/api/js?sensor=false', false, '3', false);
        wp_enqueue_script( 'gmap3', get_site_url().'/wp-content/plugins/maps/gmap3-3.4-min.js', array('jquery'));
        wp_enqueue_script( 'autocomplete', get_site_url().'/wp-content/plugins/maps/jquery-autocomplete.min.js', array('jquery'));
    }
        
add_action( 'admin_enqueue_scripts', 'map_script_one' );


// Include some css and jQuery script for the maps
function map_script_two() { ?>
    <link rel="stylesheet" type="text/css" href="'.get_site_url().'/wp-content/plugins/maps/jquery-autocomplete.css"/>
        <style>
          .gmap3{
            margin: 20px auto;
            border: 1px dashed #C0C0C0;
            width: 1000px;
            height: 500px;
          }
          .ui-menu .ui-menu-item{
            text-align: left;  
            font-weight: normal;
          }
          .ui-menu .ui-menu-item a.ui-state-hover{
            border: 1px solid red; 
            background: #FFBFBF; 
            color: black;
            font-weight:bold;
          }
        </style>
    
        <script type="text/javascript">
          jQuery(function(){
              
              jQuery('#test').gmap3();
    
              jQuery('#address').autocomplete({
                source: function() {
                  jQuery("#test").gmap3({
                    action:'getAddress',
                    address: jQuery(this).val(),
                    callback:function(results){
                      if (!results) return;
                      jQuery('#address').autocomplete(
                        'display', 
                        results,
                        false
                      );
                    }
                  });
                },
                cb:{
                  cast: function(item){
                    return item.formatted_address;
                  },
                  select: function(item) {
                    jQuery("#test").gmap3(
                      {action:'clear', name:'marker'},
                      {action:'addMarker',
                        latLng:item.geometry.location,
                        map:{center:true}
                      }
                    );
                  }
                }
              })
              .focus();
              
          });
        </script><?php 
    }
add_action( 'admin_head', 'map_script_two' );

// Create the box    
function set_map_box() {
    add_meta_box('addressmap', 'Address Map', 'address_map', 'post', 'normal', 'default');
    }
add_action('admin_init','set_map_box');


// Content of the box
function address_map() {
        global $post; ?>
        <input type="text" id="address" size="60">
    <div id="test" class="gmap3"></div>
<?php } // more code after.

So far I had tried to change ‘$’ to jQuery on the script, deregister original jquery from wordpress and use another version, disable all plugins and remove unnecessary code on this custom plugin, but so far nothing seems to work 🙁

Any idea of what can be the problem ?

Basically what the example does is to display a box where the user can input an address and the map gets updated to that address.

Answer 1

You may be trying to draw your map before the #test div is created. Try using

jQuery(document).ready(function($){

in your map_script_two() function to delay the drawing of the map until the whole document has loaded.

You could also include that jQuery in your address_map() function after your #test div.