[MaartenLParticipant]

As we all know the Google Maps API is now needed to show Google Maps using Cornerstone.
http://googlegeodevelopers.blogspot.ca/2016/06/building-for-scale-updates-to-google.html

Also Cornerstone 1.3.0 supports inserting the API key. However every time that you add an Google Maps element, you need to paste in the API. Is there a way to define the API key as a default value in your child themes functions.php file?

For now I hardcoded my API in the /plugins/cornerstone/includes/shortcodes/google-map.php file, by adding my api_key in line 44 just before the if statement.

$api_key = "MY-API-KEY";

  if ( $api_key ) {
    $api_key = esc_attr( $api_key );
    $script_url = add_query_arg( array( 'key' => $api_key ), $script_url );
  }

It would be nice to have this in the child functions, so I don’t lose this change after a cornerstone update. Any thoughts?

[ThaiModerator]

Hi There,

Please add the following code under functions.php file locates in your child theme:

function x_shortcode_google_map_v2( $atts, $content = null ) {
  extract( shortcode_atts( array(
    'id'           => '',
    'class'        => '',
    'style'        => '',
    'lat'          => '',
    'lng'          => '',
    'drag'         => '',
    'zoom'         => '',
    'zoom_control' => '',
    'height'       => '',
    'hue'          => '',
    'no_container' => '',
    'api_key'      => ''
  ), $atts, 'x_google_map' ) );

  static $count = 0; $count++;

  $id           = ( $id           != ''     ) ? $id : 'x-google-map-' . $count;
  $class        = ( $class        != ''     ) ? 'x-map x-google-map ' . esc_attr( $class ) : 'x-map x-google-map';
  $style        = ( $style        != ''     ) ? 'style="' . $style . '"' : '';
  $height       = ( $height       != ''     ) ? 'style="padding-bottom: ' . $height . ';"' : '';
  $no_container = ( $no_container == 'true' ) ? '' : ' with-container';

  $js_params = array(
    'lat'         => ( $lat          != ''     ) ? $lat : '40.7056308',
    'lng'         => ( $lng          != ''     ) ? $lng : '-73.9780035',
    'drag'        => ( $drag         == 'true' ),
    'zoom'        => ( $zoom         != ''     ) ? $zoom : '12',
    'zoomControl' => ( $zoom_control == 'true' ),
    'hue'         => ( $hue          != ''     ) ? $hue : '',
  );

  $data = cs_generate_data_attributes( 'google_map', $js_params );

  $script_url = 'https://maps.googleapis.com/maps/api/js';

  $api_key = 'Your_API_Key';

  if ( $api_key ) {
    $api_key = esc_attr( $api_key );
    $script_url = add_query_arg( array( 'key' => $api_key ), $script_url );
  }

  wp_register_script( 'cs-google-maps', $script_url );
  wp_enqueue_script( 'cs-google-maps' );

  $output = "<div id=\"{$id}\" class=\"{$class}{$no_container}\" {$data} {$style}><div class=\"x-map-inner x-google-map-inner\" {$height}></div>" . do_shortcode( $content ) . "</div>";

  return $output;
}
add_action('wp_head', 'change_google_map_shortcode');
function change_google_map_shortcode() {
  remove_shortcode( 'x_google_map' );
  add_shortcode( 'x_google_map', 'x_shortcode_google_map_v2' );
}

Replace Your_API_Key with your API key.

Regards!

[thirtyParticipant]

Is there a better way of doing this which doesnt require recreating the function for the built in shortcode? It’s going to create a maintenance headache to make sure that this function is kept inline with any updates.

[ThaiModerator]

Hi There,

If you placed the provided code under functions.php file in your child theme, it would be safe in the future updates.

Regards!

[Author]

Posts