Pase los valores de los campos personalizados a Google Maps

4

Estoy usando este script en Google Maps para mostrar en mi sitio de 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>

He configurado dos campos personalizados "fl_long", "fl" lat "para longitute y latitude. ¿Cómo modifico el código anterior para que los valores se tomen de los campos personalizados en lugar de ser números codificados? p>

google.maps.event.addDomListener(window, 'load', initialize);

    
pregunta Nikolas Petousis 20.03.2013 - 00:38

2 respuestas

6

Aquí hay una versión que usa wp_localize_script() , como lo sugieren otros. Es solo un poco más limpio, ya que no mezcla su PHP con su JS, y en general es una buena manera de pasar cosas del lado del servidor a su JavaScript.

Primero, ponga el siguiente código en su complemento o en sus funciones.php (uso un complemento, así que lo nombré como corresponde, pero puede nombrarlo como desee):

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' );


Tenga en cuenta que la llamada a su wp_localize_script() debe ocurrir entre la llamada a wp_register_script() (para el archivo en el que utilizará las coordenadas de latitud largas generadas con PHP) y la llamada a wp_enqueue_script() . Esto debería mostrar algo como esto en la fuente de tu página:

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


Luego, dentro de su archivo JS, puede hacer que su función use el objeto 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);
}


Siéntase libre de hacer preguntas si algo no está claro en el código.

    
respondido por el montrealist 20.03.2013 - 04:38
1

Intente agregar la secuencia de comandos a la cabeza con un enlace de 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 
}
    
respondido por el Douglas.Sesar 20.03.2013 - 01:59

Lea otras preguntas en las etiquetas