L'API Google Maps Javascript dans WordPress

Espère que vous les gars peuvent répondre à cette question! Je pense qu'il devrait être relativement facile, mais je n'arrive pas à se familiariser avec elle.

Comment allez-vous sur le chargement de l'API Google Maps Javascript dans un WordPress post/page?

Le Codex WordPress, il semble que le fait d'avoir évoqué votre fichier javascript dans le header de votre thème, vous devez ensuite appeler les fonctions au sein de la poste.

J'ai évoqué le Google fichiers Javascript dans le header comme suit:

<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBuU_0_uLMnFM-2oWod_fzC0atPZj7dHlU&sensor=false"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

et puis à mon fichier javascript avec tout le code de l'API dans l'en-tête trop:

<script type="text/javascript" src="http://runforlifeuk.com/rhedeg/wp-content/javascript/trefilmap.js"></script>

Puis j'ai utilisé le code suivant dans le post:

<script type="text/javascript" src="http://runforlifeuk.com/rhedeg/wp-content/javascript/trefilmap.js">
</script>
<script type="text/javascript">
</script>
<div id="map-canvas">
</div>

Mais cela crée une boîte vide. J'ai essayé d'appeler le prédéfinies Google JS fonctions au sein de la poste, mais cela ne semble pas avoir travaillé.

Est-ce que quelqu'un la mise en œuvre de Google Maps sur WordPress qui a déjà fait cela? Je peux coller le code directement dans le post, mais la Carte Google vient de sortir plein de bugs.

Toutes les idées seraient grandement appréciés!
Merci beaucoup.

  • Comment vous voulez utiliser la carte? Comme arrière-plan ou comme une boîte dans votre page? Aussi, vous voulez placer de long et lat pour votre place ou quelque chose d'autre?
InformationsquelleAutor wowzimmer | 2013-04-24
  1. 14

    Avec WordPress, vous ne devriez jamais le code js dans l'en-tête ou le pied de page. Au lieu d'utiliser wp_enqueue_script l'intérieur d'une fonction accroché dans la wp_enqueue_scripts action en functions.php. Par exemple:

    function add_scripts() {
  wp_enqueue_script('google-maps', 'https://maps.googleapis.com/maps/api/js?key=AIzaSyBuU_0_uLMnFM-2oWod_fzC0atPZj7dHlU&sensor=false');
  wp_enqueue_script('google-jsapi','https://www.google.com/jsapi');     
}
add_action('wp_enqueue_scripts', 'add_scripts')

    Vous voulez préfixe le nom de la fonction avec un unique slug. Vous pouvez ajouter des dépendances numéros de version ou le déplacer pour le pied de page avec des variables supplémentaires, voir le codex pour plus d'info. Dans votre cas, vous voudrez probablement pour envelopper wp_enqueue_script dans un conditionnelle de sorte qu'il ne charge que sur les messages ou les pages que vous en avez besoin pour.

    • J'ai finalement obtenu sensiblement le même code que ci-dessus: function google_maps_api() { wp_register_script( 'googlemap', 'https://maps.googleapis.com/maps/api/js?key=AIzaSyBuU_0_uLMnFM-2oWod_fzC0atPZj7dHlU&sensor=false',true); wp_register_script( 'elevation_service', 'https://www.google.com/jsapi',true); wp_enqueue_script('googlemap'); wp_enqueue_script('elevation_service'); } add_action( 'wp_enqueue_scripts', 'google_maps_api' );
    • Heureux, il a travaillé. À l'aide de "vrai" comme troisième variable n'est pas nécessaire. Ni l'enregistrement du script avant de enqueueing il. L'inscription de scripts séparément n'est nécessaire que lorsque vous voulez faire conditionnelle script enqueues plus simple ou si vous vous inscrivez à un script qui va être une dépendance pour une autre script. Sa fine de la façon dont vous le faites, c'est juste redondant.
    InformationsquelleAutor JPollock
  2. 0

    J'ai juste eu un coup d'oeil à votre http://runforlifeuk.com/rhedeg/wp-content/javascript/trefilmap.js fichier

    vous ne devriez pas avoir <script> balises dans ce!

    <script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBuU_0_uLMnFM-2oWod_fzC0atPZj7dHlU&sensor=false"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

    Je vous suggère de jeter un oeil à la console javascript pour les erreurs et apprendre à l'aide de wp_enqueue_script() d'ajouter du javascript dans vos pages.

    • Merci pour l'astuce!! J'ai réussi à enregistrer et à mettre en file d'attente l'API Google Map bibliothèque javascript. J'ai aussi placé .fichier js pour mon javascript dans le header de mon thème. La bonne nouvelle, c'est que la carte des charges... La mauvaise nouvelle, c'est que la carte est horriblement cassé. Par exemple, les tiges de infoboxes ne pas l'ouvrir, le fermer croix n'apparaît pas, le streetview l'icône pegman n'apparaît pas sur la carte. Toutes ces choses que je sais de travail sur une simple page HTML. Quand je copie le code Javascript directement dans le wordpress post, j'ai de nouveau obtenir le même problème. Le changement de mon thème TwentyEleven ne pas le résoudre. Toutes les idées!!!!
    InformationsquelleAutor RRikesh