Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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

share|improve this question
    
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 :( –  Nikolas Petousis 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

2 Answers 2

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.

share|improve this answer

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 
}
share|improve this answer
    
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. –  Douglas.Sesar 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

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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