web-dev-qa-db-fra.com

Transmettre les valeurs de champs personnalisés à Google Maps

J'utilise ce script sur des cartes Google affichées sur mon site wordpress:

<head>
    <script>
    function initialize()
    {
      var mapProp = {
        center:new google.maps.LatLng(51.508742,-0.120850),
        zoom:5,
        mapTypeId:google.maps.MapTypeId.ROADMAP
      };
      var map=new google.maps.Map(document.getElementById("googleMap",mapProp);
    }
    </script>          
</head>

J'ai configuré deux champs personnalisés "fl_long", "fl" lat "pour le longitute et la latitude. Comment modifier le code ci-dessus afin que les valeurs soient extraites des champs personnalisés au lieu d'être des nombres codés en dur?

google.maps.event.addDomListener(window, 'load', initialize);
javascriptgoogle
4
Nikolas Petousis

Voici une version qui utilise wp_localize_script(), comme suggéré par d'autres. C'est juste un peu plus propre, puisque vous ne mélangez pas votre PHP avec votre JS, et c'est généralement un moyen astucieux de transmettre des éléments du côté serveur à votre JavaScript.

Commencez par insérer le code suivant dans votre plugin ou dans votre functions.php (j'utilise un plugin, je l'ai donc nommé en conséquence, mais vous pouvez le nommer comme vous le souhaitez):

function register_plugin_scripts() {

    wp_register_script('my-coordinates-script',
    plugins_url( 'my-plugin/js/using-coordinates-here.js' ),
    'jquery',
    '0.1');

    global $post;
    $fl_lat = get_post_meta($post->ID, 'fl_lat', true); //  "51.508742" or empty string
    $fl_long = get_post_meta($post->ID, 'fl_long', true); // "-0.120850" or empty string

    if( !empty($fl_lat) && !empty($fl_long) ) {
        wp_localize_script('my-coordinates-script', 'my-coordinates', array(
                'lat' => $fl_lat,
                'long' => $fl_long
            )
    }

    wp_enqueue_script( 'my-coordinates-script', plugins_url( 'my-plugin/js/using-coordinates-here.js' ) );

} // end register_plugin_scripts

add_action( 'wp_enqueue_scripts', 'register_plugin_scripts' );


Notez que l'appel à votre wp_localize_script() doit avoir lieu entre l'appel à wp_register_script() (pour le fichier dans lequel vous utiliserez les coordonnées lat-long générées avec PHP) et l'appel à wp_enqueue_script(). Cela devrait produire quelque chose comme ceci dans votre source de page:

<script type='text/javascript'>
/* <![CDATA[ */
var my-coordinates = {"lat":"51.508742","long":"-0.120850"};
/* ]]> */
</script>
<script type='text/javascript' src='http://yourserver/plugins/my-plugin/js/using-coordinates-here.js?ver=0.1'></script>


Ensuite, dans votre fichier JS, votre fonction peut utiliser l'objet my-coordinates:

function initialize() {
    lat = 0;
    long = 0;
    if (typeof my-coordinates !== 'undefined' && my-coordinates.lat && my-coordinates.long) {
        lat = my-coordinates.lat;
        long = my-coordinates.long;
    }
    var mapProp = {
      center: new google.maps.LatLng(lat, long),
      zoom: 5,
      mapTypeId: google.maps.MapTypeId.ROADMAP
      };
    var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
}


N'hésitez pas à poser des questions si quelque chose n'est pas clair dans le code.

6
montrealist

Essayez d’ajouter le script à la tête avec un hook wordpress:

add_action('wp_head','your_google_head');

function your_google_head(){
    $fl_lat = get_post_meta($your_post_id,'fl_lat',true);//$fl_lat = 51.508742;
    $fl_long = get_post_meta($your_post_id,'fl_long',true);//$fl_long = -0.120850;
    ?>
    <script type="text/javascript">

function initialize()
{
var mapProp = {
  center:new google.maps.LatLng(<?php echo $fl_lat;?>,<?php echo $fl_long;?>),
  zoom:5,
  mapTypeId:google.maps.MapTypeId.ROADMAP
  };
var map=new google.maps.Map(document.getElementById("googleMap")
  ,mapProp);
}

    </script>
    <?php 
}
1
Douglas.Sesar