Passar valores de campos personalizados para o Google Maps

4

Estou usando este script para exibir o Google Maps no meu 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>

Eu configurei dois campos personalizados "fl_long", "fl" lat "para longitude e latitude. Como eu modifico o código acima para que os valores sejam obtidos dos campos personalizados em vez de serem números codificados?

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

    
por Nikolas Petousis 20.03.2013 / 00:38

2 respostas

6

Aqui está uma versão que usa wp_localize_script() , como sugerido por outros. É apenas um pouco mais limpo, já que você não mistura seu PHP com seu JS e, geralmente, é uma maneira simples de passar as coisas do lado do servidor para o JavaScript.

Primeiro, coloque o seguinte código no seu plugin ou no seu functions.php (eu uso um plugin, então eu o nomeei de acordo, mas você pode dar o nome que quiser):

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


Observe que a chamada para seu wp_localize_script() deve ocorrer entre a chamada para wp_register_script() (para o arquivo no qual você utilizará as coordenadas de latitude longa geradas com PHP) e a chamada para wp_enqueue_script() . Isso deve mostrar algo assim na fonte da sua 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>


Então dentro do seu arquivo JS você pode ter sua função usando o 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);
}


Sinta-se à vontade para fazer perguntas se algo não estiver claro no código.

    
por montrealist 20.03.2013 / 04:38
1

Tente adicionar o script à cabeça com um gancho do 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 
}
    
por Douglas.Sesar 20.03.2013 / 01:59