0

I'm trying to get values (latitude, longitude and an image) from the WordPress database and put it into a javascript array.

Unfortunately I'm a newbie at Javascript and PHP!

Here is the code I have so far:

getdata.php:

<?php
    require_once( $_SERVER['DOCUMENT_ROOT'] . '/wp-config.php' );
    require_once( $_SERVER['DOCUMENT_ROOT'] . '/wp-load.php' );  
?>

distance.php:

<?php
  include 'getdata.php';
?>
<html>
<head>
<script  type="text/javascript">

  <?php $args = array( 'post_type' => 'listing', 'p' => $post_id ); ?>
  values = [ <?php
                            $listing_marker_loop = new WP_Query( $args );

                            while ( $listing_marker_loop->have_posts() ) : $listing_marker_loop->the_post(); 

                            $address = get_field('location');

                            global $post;
                            // load all 'categories' terms for the post

                            endwhile;
  ?>];

  alert(values[1]);

</script>
</head>
<body></body>
</html>

I'm trying to get it to give me an alert, so that I know I'm on the right track!

Can someone tell me how to make this work?

Improve this question
4
  • What are you trying to do? Latitude Longitude + Image looks like you want to build your own Google Map? In this case, maybe you can use this: codex.wordpress.org/Function_Reference/wp_localize_script
    – HU is Sebastian
    Commented Jul 21, 2014 at 6:58
  • Not Google maps; open source, but yes a map. How would I include that in my script?
    – user3697700
    Commented Jul 21, 2014 at 22:13
  • Do you want to use the map on your wordpress site, or externally?
    – HU is Sebastian
    Commented Jul 22, 2014 at 6:17
  • I'm using it on the wordpress site.
    – user3697700
    Commented Jul 23, 2014 at 1:54

1 Answer 1

Reset to default
0

EDIT: Changed the code to be used in a plugin.

Okay, with the info you provided, you can do something like this:

Step 1) Put your Javascript Map Loading stuff into a .js file. Save it somewhere in your plugin directory, like "myplugin/mapscript.js"

Step 2) create a file in your plugin directory, like "myplugin/myplugin.php". Insert the Plugin header so that it can be recognized by wordpress:

<?php
/**
 * Plugin Name: My Superawesome Map stuff Plugin
 * Description: Does Maps and Stuff
 * Version: 1.0
 * Author: YOUR_NAME
 * License: GPL2
 */

Insert a function in your plugins myplugin.php, where you register & enqueue the script.

function mapstuff_load_scripts() {
 if(is_singular()) {
 global $post;  
 wp_enqueue_script('mapstuff-script', plugins_url( 'mapscript.js', __FILE__ ));
    wp_localize_script('mapstuff-script', 'mapstuff_script_vars', array(
            'lat' => get_post_meta($post->ID,'lat',TRUE),
            'lng' => get_post_meta($post->ID,'lng',TRUE),
            'addrimg' => get_post_meta($post->ID,'addrimg',TRUE)
        )
    );
 }
}
add_action('wp_enqueue_scripts', 'mapstuff_load_scripts');

I added the conditional is_singular to ensure this is only loaded on post/page view, not on search and index pages.

Step 3) Add the code for a shortcode in the plugin, so you can insert it on your page/post/wherever

add_shortcode('awesomemap','do_awesome_map');
function do_awesome_map($args = array()){
   $returnage = "THE STUFF THAT NEEDS TO BE INSERTED FOR THE MAP TO LOAD";
   return $returnage;
}

Step 4) Your localized vars will be in an javascript array, so change your mapscript to use these vars like this:

 alert(mapstuff_script_vars.lng);
 alert(mapstuff_script_vars.lat);
 alert(mapstuff_script_vars.addrimg);

Step 4) Upload, insert the shortcode [awesomemap] in your page/post, success ! ;)

Happy Coding,

Kuchenundkakao

Improve this answer
5
  • The latitude, longitude and image are stored in a wordpress post, will this script get these variables from a post?
    – user3697700
    Commented Jul 23, 2014 at 23:04
  • I need to do this without editing the theme. So I guess, it would either be through a plugin, or if I could make it stand alone it would be better. I was planning on accessing the map through an iFrame.
    – user3697700
    Commented Jul 23, 2014 at 23:05
  • I edited the answer so you can use it in a plugin.
    – HU is Sebastian
    Commented Jul 24, 2014 at 6:38
  • This code doesn't work for me. The alert comes up blank.
    – user3697700
    Commented Jul 24, 2014 at 22:36
  • Look into the sourcecode of the page. are the custom fields lng, lat and addrimg set for the page?
    – HU is Sebastian
    Commented Jul 25, 2014 at 7:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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