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 created a theme with custom posts which outputs to a Google Map with place markers. Users will create a custom post users and include street addresses which will be geocoded using Google's Map API v3 and a marker is placed on a Google Map.

I am relatively new to coding and designing custom Wordpress themes, so I am trying to wrap my head around how to grab information from each custom post in javascript for the Google Maps API.

Can someone please explain how this is done?

Thanks, AME

share|improve this question
    
see this answer for a few hints that may get you started. –  Milo Sep 17 '12 at 1:29
add comment

1 Answer

up vote 3 down vote accepted

Well, this is kind of easy..

The google-map API needs a format like Your Street 123, 54321 Your City

Assuming you have your data like this:

<div id="street">Your Street 123</div>
<div id="zip">54321</div>
<div id="city">Your City</div>

Assuming you are using jQuery:

(function($){
    $.fn.create_gmap_address = function() {

        var street = $('#street').html();
        var zip = $('#zip').html();
        var city = $('#city').html();

        return street + ',' + zip + ' ' + city;
    }
})(jQuery);

And then in your maps API code:

geocoder.geocode( { 'address': $.create_gmap_address() }, function(results, status) {
    // your maps code

Solution 2

Or you could, of course, get all this data via php and then store into a global JS variable (maybe the better way).

function set_address_js_var() {
    if ( 'your_post_type' == get_post_type() ) {
        // Assuming you are using meta fields to store the address
        $postMeta = get_post_meta(get_the_ID());
        return $postMeta['sreet'] . ',' . $postMeta['zip'] . ' ' . $postMeta['city'];
    }
}
function load_fe_scripts() {
    wp_enqueue_script( 'global-js-var', get_template_directory_uri() . '/js/my_file.js' );
    $localize_array = array(
        'google_maps_address' => set_address_js_var()
    );
    wp_localize_script( 'global-js-var', 'my_global', $localize_array );
}
add_action('wp_enqueue_scripts', 'load_fe_scripts');

You can now acces the var in your JS File by my_global.google_maps_address

share|improve this answer
add comment

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.