4

I am using this script on display google maps on my wordpress site:

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

I have set up two custom fields "fl_long" , "fl"lat" for the longitute and latitude. How do I modify the code above so that the values are taken from the custom fields instead of being hardcoded numbers?

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

3
  • could someone also please help me with formatting the code? I tried adding 4 spaces and 8 spaces but i can't get it to work! newb :( Mar 19 '13 at 23:39
  • 3
    I don't have time for a complete answer right now, but have a look at the wp_localize_script() function. (You'll probably also want to check out wp_enqueue_script.
    – Pat J
    Mar 19 '13 at 23:52
  • Pat J - you took the words right out of my mouth.
    – vancoder
    Mar 19 '13 at 23:54
6

Here's a version that uses wp_localize_script(), as suggested by others. It's just a little bit cleaner, since you don't mix your PHP with your JS, and generally a neat way to pass things from the server side to your JavaScript.

First, put the following code either in your plugin or your functions.php (I use a plugin so I named it accordingly, but you can name it whatever you want):

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


Note that the call to your wp_localize_script() must occur between the call to wp_register_script() (for the file in which you'll be using those lat-long coordinates generated with PHP), and the call to wp_enqueue_script(). This should output something like this in your page source:

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


Then inside your JS file you can have your function use the my-coordinates object:

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


Feel free to ask questions if something is not clear from the code.

1

Try to add the script to the head with a wordpress hook:

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 
}
3
  • It's always better to load scripts using wp_enqueue_script(). See prelovac.com/vladimir/…, for instance.
    – Pat J
    Mar 20 '13 at 13:13
  • I actually didn't even know about the wp_localize_script() function. I've seen many plugins simply mix their PHP and javascript; I thought it was standard practice. Mar 20 '13 at 14:29
  • 1
    I only discovered wp_localize_script() when I was trying to pass PHP variables to a jQuery script. It's handy.
    – Pat J
    Mar 20 '13 at 15:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.