Google Maps V3, Wordpress et jQuery

Question

J'essaie de mettre en œuvre cet exemple http://jsfiddle.net/gzF6w/1/ (à partir d'une autre question ici sur stak) sur un plugin wordpress (metabox sur les messages).

Pour quelque raison, la boîte n'affiche pas la carte comme elle le devrait.

Voici mon code jusqu'à présent

// 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. 

Jusqu'à présent, j'avais essayé de changer « $ » à jQuery sur le script, désenregistrer jquery d'origine de blogs et d'utiliser une autre version, désactiver tous les plugins et supprimer le code inutiles sur ce plug-in personnalisé, mais jusqu'à présent, rien ne semble fonctionner :(

Toute idée de ce qui peut être le problème?

Fondamentalement, ce que l'exemple n'est d'afficher une boîte où l'utilisateur peut entrer une adresse et la la carte est mise à jour pour cette adresse ess.

Answer 1

Vous essayez peut-être de dessiner votre carte avant que la div #test ne soit créée. Essayez d'utiliser

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

dans votre fonction map_script_two() pour retarder le dessin de la carte jusqu'à ce que l'ensemble du document a été chargé.

Vous pouvez également inclure cette jQuery dans votre address_map() fonction après votre div #test.