6.6 Beta 2 - Google Maps Issues

Hi Charlie,

I am in the process of creating a Single Layout for MEC and have hit a handful of problems.

Firstly, the map does not preview in any form in Cornerstone (see screenshot). It does render on the front end though.

Secondly, dynamic content does not seem to be coming through from the longitude and latitude looper. I have tested the two looper results as plain text and I can see they are correct. They just don’t seem to work in the Map element. With the dynamic content in place, the map is set to latitude: 0 and longitude: 0

Can you replicate this behaviour?

Thanks,
Christopher

Hello @whitemedia,

Thank you for the inquiry.

There’s a Google Map API key error ( RefererNotAllowedMapError) when we checked the site.

https://developers.google.com/maps/documentation/javascript/error-messages#referer-not-allowed-map-error

The current URL loading the Maps JavaScript API has not been added to the list of allowed referrers. Please check the referrer settings of your API key in the Cloud console.

See the Maps JavaScript API and Get an API Key.

There’s also a jQuery error but it might not be related.

Please correct the RefererNotAllowedMapError issue above so that we can check the preview issue.

Thank you.

Hi,

Very strange. The API is restricted for the website with wildcards. I have double checked - see below.

API Website Restriction
api

Despite this and the API key being 100% correct, I am also seeing the same error.

However, aside from the Google error, this is presumably separate to the dynamic content issue for longitude and latitude?

Thanks,
Christopher

To do with this issue?

That makes sense @spedney. Thanks for highlighting it. On the front end, the map displays normally, but not with dynamic content for long/lat. No marker present and centered on the equator / Greenwich meridian on the site itself (see screenshot)

The Dynamic content issue must still be a separate issue though.

On the Google front, I notice there is a deprecated notice for the markers in the console, present since 2024. Is this something, which needs dealing with? (please see screenshot again)

Sorry for the delay. If I’m not mistaken, the coordinates of the selected location are not directly available for the events, so the dynamic content {{dc:looper:field key="event_location_lat"}} will not work. Where did you get this from, by the way? Is there any reference to this custom field?

One possible solution to retrieve the coordinates is to create a custom looper based on the mec_location_id field. However, I’m not sure which function retrieves this data.

Example in the functions.php file

   add_filter('cs_looper_custom_event_location', function ($result, $args) {

    if (empty($args['location'])) {
        return null;
    }

    $location_id = $args['location'];
    $mec =  // mec instance
    $location = // get location function here

    if (!empty($location['latitude']) && !empty($location['longitude'])) {
        return [
            'latitude'  => $location['latitude'],
            'longitude' => $location['longitude'],
            'address'   => $location['address'] ?? '',
            'name'      => $location['name'] ?? '',
        ];

    }
    return null;
}, 10, 2);

You have to set the mec_location_id as a parameter:

{
  "location": "{{dc:post:meta key='mec_location_id'}}"
}

You can then consume the data using the following template:

{{dc:looper:field key="latitude"}}
{{dc:looper:field key="longtitude"}}

If you can provide the FTP details in the secure note, we’ll try to check this further. By the way, the map preview works correctly on our end, even when using dynamic content to retrieve the coordinates. You may need to review the previous thread as @spedney suggested.

Warm regards.

Found the following post which might help with the coordinates retrieval: MEC Location Name

You are correct, in that the location and organizer details are terms, rather than posts. To get the data I have been using a custom looper which uses the below function to retrieve the location and organizer details from MEC. For some reason the geo co-ordinates were not coming through.

Since my last post, the web host has restarted the server services for this website and everything is now working as expected, including the longitude and latitude fields. It appears that something went wrong at the web host’s end. Very strange that some looper data came through, but not all.

In case it helps, here is the custom looper function, which works for displaying location and organizer data.

function stt_events_query() {
    $current_date = date('Y-m-d');

    $args = array(
        'post_type'      => 'mec-events',
        'post_status'    => 'publish',
        'meta_key'       => 'mec_start_date',
        'meta_query'     => array(
            array(
                'key'     => 'mec_start_date',
                'value'   => $current_date,
                'compare' => '>=',
                'type'    => 'DATE',
            ),
        ),
        'orderby'        => array(
            'meta_value' => 'ASC',
            'title'      => 'ASC',
        ),
        'posts_per_page' => 1000,
    );

    $query = new WP_Query($args);

    if ($query->have_posts()) {
        $unique_events = [];

        foreach ($query->posts as $post) {
            // Retrieve event details
            $event_start_date = get_post_meta($post->ID, 'mec_start_date', true);
            $event_description = wp_strip_all_tags($post->post_content);

            // Retrieve location details
            $location_terms = get_the_terms($post->ID, 'mec_location');
            if ($location_terms && !is_wp_error($location_terms)) {
                $location_name    = strip_tags($location_terms[0]->name);
                $location_id      = $location_terms[0]->term_id;
                $location_address = get_term_meta($location_id, 'address', true);
                $location_desc    = term_description($location_id, 'mec_location');
                $location_lat     = get_term_meta($location_id, 'latitude', true);
                $location_lng     = get_term_meta($location_id, 'longitude', true);
            } else {
                $location_name    = '';
                $location_address = '';
                $location_desc    = '';
                $location_lat     = '';
                $location_lng     = '';
            }

            // Retrieve organizer details
            $organizer_terms = get_the_terms($post->ID, 'mec_organizer');
            if ($organizer_terms && !is_wp_error($organizer_terms)) {
                $organizer_name  = strip_tags($organizer_terms[0]->name);
                $organizer_id    = $organizer_terms[0]->term_id;
                $organizer_email = get_term_meta($organizer_id, 'email', true);
                $organizer_phone = get_term_meta($organizer_id, 'tel', true);
            } else {
                $organizer_name  = '';
                $organizer_email = '';
                $organizer_phone = '';
            }

            // Retrieve featured image
            $featured_image = get_the_post_thumbnail_url($post->ID, 'full');

            // Retrieve event permalink
            $event_permalink = get_permalink($post->ID);

            // Add event data to results
            $unique_events[] = array(
                'event_id'               => $post->ID,
                'event_title'            => $post->post_title,
                'event_description'      => $event_description,
                'event_start_date'       => $event_start_date,
                'event_location_name'    => $location_name,
                'event_location_address' => $location_address,
                'event_location_desc'    => $location_desc,
                'event_location_lat'     => $location_lat,
                'event_location_lng'     => $location_lng,
                'event_organizer_name'   => $organizer_name,
                'event_organizer_email'  => $organizer_email,
                'event_organizer_phone'  => $organizer_phone,
                'event_featured_image'   => $featured_image,
                'event_permalink'        => $event_permalink,
            );
        }

        wp_reset_postdata();
        return $unique_events;
    } else {
        return array();
    }
}

// Register the custom Looper Provider
add_filter('cs_looper_custom_stt_events', function($result) {
    return stt_events_query();
});

These looper keys are then used in CS to display the output:

Event Location Name:
{{dc:looper:field key="event_location_name"}}

Event Location Address:
{{dc:looper:field key="event_location_address"}}

Event Location Description:
{{dc:looper:field key="event_location_desc"}}

Event Location Latitude:
{{dc:looper:field key="event_location_lat"}}

Event Location Longitude:
{{dc:looper:field key="event_location_lng"}}

Organizer Name:
{{dc:looper:field key="event_organizer_name"}}

Organizer Email:
{{dc:looper:field key="event_organizer_email"}}

Organizer Phone:
{{dc:looper:field key="event_organizer_phone"}}

Great! Glad to know you managed to solve the issue. Thank you for sharing the custom looper function.