Pass custom fields values to Google Maps

by

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

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="https://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.

Leave a Comment