WordPress.org

Ready to get started?Download WordPress

Forums

Simple Fields Map extension
Displaying locations on front end (6 posts)

  1. goldilocks
    Member
    Posted 2 months ago #

    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/

  2. goldilocks
    Member
    Posted 2 months ago #

    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.

  3. Pär Thernström
    Member
    Plugin Author

    Posted 2 months ago #

    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"];
  4. goldilocks
    Member
    Posted 2 months ago #

    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?

  5. goldilocks
    Member
    Posted 2 months ago #

    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!

  6. goldilocks
    Member
    Posted 2 months ago #

    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?

Reply

You must log in to post.

About this Plugin

About this Topic