# Pass custom fields values to Google Maps

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

<head>
<script>
function initialize()
{
var mapProp = {
zoom:5,
};
}
</script>


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


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

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

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