it-swarm.com.de

Übergeben Sie benutzerdefinierte Feldwerte an Google Maps

Ich verwende dieses Skript, um Google Maps auf meiner WordPress-Site anzuzeigen:

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

Ich habe zwei benutzerdefinierte Felder "fl_long", "fl" lat "für die Länge und Breite eingerichtet. Wie ändere ich den obigen Code, damit die Werte aus den benutzerdefinierten Feldern übernommen werden, anstatt fest codierte Zahlen zu sein?

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

Hier ist eine Version, die wp_localize_script() verwendet, wie von anderen vorgeschlagen. Es ist nur ein bisschen sauberer, da Sie Ihr PHP nicht mit Ihrem JS mischen und im Allgemeinen eine gute Möglichkeit sind, Dinge von der Serverseite an Ihr JavaScript zu übergeben.

Fügen Sie zuerst den folgenden Code entweder in Ihr Plugin oder in Ihre functions.php ein (ich verwende ein Plugin, damit ich es entsprechend benenne, aber Sie können es benennen, was Sie wollen):

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


Beachten Sie, dass der Aufruf Ihrer wp_localize_script() zwischen dem Aufruf von wp_register_script() (für die Datei, in der Sie die mit PHP generierten Lat-Long-Koordinaten verwenden) und dem Aufruf von wp_enqueue_script() erfolgen muss. Dies sollte in Ihrer Seitenquelle ungefähr so ​​aussehen:

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


Dann können Sie in Ihrer JS-Datei Ihre Funktion das Objekt my-coordinates verwenden lassen:

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


Sie können gerne Fragen stellen, wenn aus dem Code etwas nicht klar hervorgeht.

6
montrealist

Versuchen Sie, das Skript mit einem WordPress-Hook zum Kopf hinzuzufügen:

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