WordPress.org

Support

Support » Plugins and Hacks » Displaying locations on front end

Displaying locations on front end

  • I have successfully added Google maps to my template but cannot get the locations I have added via Simple Fields Map Extension to display on the map. I just can’t figure out how to pull both the latitude and longitude from each post since they are both stored in one field.

    The query I’m currently using, which is based on this thread is:

    $locations = array();
    
        $location_query = new WP_Query( array(
            'simple_fields_value' => 'simple-fields-field-googlemaps',
            'posts_per_page' => -1
        ) );
    
        while ( $location_query->have_posts() ) {
            $location_query->the_post();
            $locations[] = array(
                'title' => get_the_title(),
                'latitude' => simple_fields_get_post_value( get_the_ID(), 'lat', true ),
                'longitude' => simple_fields_get_post_value( get_the_ID(), 'lng', true ),
                'id' => get_the_ID()
            );
        }
    
        wp_reset_postdata();
    
        wp_localize_script('so.maps', 'php_args', array(
            'locations' => json_encode($locations)
        ));
    }

    I think the problem is with this:
    ` ‘latitude’ => simple_fields_get_post_value( get_the_ID(), ‘lat’, true ),
    ‘longitude’ => simple_fields_get_post_value( get_the_ID(), ‘lng’, true ),`

    But I’m stuck. Help!

    https://wordpress.org/plugins/simple-fields-map-extension/

Viewing 5 replies - 1 through 5 (of 5 total)
  • Update: having spent all day on this without fixing it, I have a simple question: How do I get the latitude and longitude out from the array field so that Google Maps can display it?

    For example, I have been using this to retrieve the values from fields:
    simple_fields_get_post_value(get_the_id(), array(1, 12), true);

    But in this case I need to separate the lat and lng values contained within the single field.

    Plugin Author Pär Thernström

    @eskapism

    I think you can do something like this:

    $field_slug = "simple-fields-field-googlemaps";
    $location = simple_fields_value($field_slug);
    $lat = $location["lat"];
    $lng = $location["lng"];

    Thanks Pär,

    However, that doesn’t work. I just tested it without the map with your suggestion on another page and I cannot even get it to echo any of the content contained within that field.

    Eg

    $field_slug = "simple-fields-field-googlemaps";
    $location = simple_fields_value($field_slug);
    $lat = $location["lat"];
    $lng = $location["lng"];
    
    echo $lat;

    I’ve searched through the documentation, but can’t find anything that tells me how to output the googlemap field, let alone display the locations on a map. Have I missed something?

    Quick update: Based on your suggestion, I’ve used the following to get the latitude and longitude to echo:

    $location = simple_fields_get_post_value(get_the_id(), array(1, 12), true);
    $lat = $location["lat"];
    $lng = $location["lng"]; 
    
    echo "LAT:". $lat; echo "LONG:". $lng;

    Where 1 is the field group number and 12 is the number of the googlemap field.

    Now to get it to display on the map… Will report back!

    I’m afraid I’m giving up. The code I have ended up with, which doesn’t work, is:

    In my template header:

    define('GOOGLE_MAPS_V3_API_KEY', 'MY API KEY HERE');
    
    add_action('wp_enqueue_scripts', 'so_exhibitions_map_scripts');
    function so_exhibitions_map_scripts() {
        wp_register_script('googlemaps', 'http://maps.googleapis.com/maps/api/js?hl=en&key=' . GOOGLE_MAPS_V3_API_KEY . '&sensor=false', false, '3');
        wp_enqueue_script('googlemaps');
    
        wp_register_script( 'so.maps', get_bloginfo('stylesheet_directory') . "/js/so.maps.js", array('jquery', 'googlemaps'), false, false );
        wp_enqueue_script('so.maps');
    
      $locations = array();
    
        $location_query = new WP_Query( array(
            'meta_key' => '_simple_fields_fieldGroupID_1_fieldID_12_numInSet_0',
            'posts_per_page' => -1
        ) );
    
        while ( $location_query->have_posts() ) {
            $location_query->the_post();
    				 $key = simple_fields_get_post_value(get_the_id(), array(1, 12), true);
      				$lat = $key["lat"];
    				$lng = $key["lng"];
            $locations[] = array(
                'title' => get_the_title(),
                'latitude' => $lat,
                'longitude' => $lng,
                'id' => get_the_ID()
            );
        }
    
        wp_reset_postdata();
    
        wp_localize_script('so.maps', 'php_args', array(
            'locations' => json_encode($locations)
        ));
    }
    
    get_header();

    In the template body:
    <div id="map_canvas"></div>

    In another file called so.maps.js:

    (function($) {
        function initialise_map() {
            var locations_str = php_args.locations.replace(/&quot;/g, '"');
            var locations = $.parseJSON(locations_str);
    
            var latlng = new google.maps.LatLng(MY DEFAULT LAT, LNG);
                    var myOptions = {
                zoom: 10,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
    
            var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    
        }
    
        function addMarker(locations, map) {
            var locationLatLng = new google.maps.LatLng(locations.latitude,locations.longitude);
            bounds.extend(locationLatLng);
            var marker = new google.maps.Marker({
                position: locationLatLng,
                map: map,
                title:locations.title
            });
        }
    
        $(function() {
            initialise_map();
        });
    
    })(jQuery);

    Any ideas?

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Displaying locations on front end’ is closed to new replies.