InMy.Live

Je cherche à implémenter ce code sur mon site wordpress aussi efficacement que possible

https://developers.google.com/maps/documentation/javascript/styling

et je veux que le JS ne se charge que sur les articles/pages que j’utiliserai sur la carte. Je ne sais pas comment commencer avec ça !

MODIFIER:

Et si j’utilise la partie enqueue dans la fonction ? Est-ce une bonne construction ?

function x_shortcode_google_map( $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";

  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_shortcode( 'x_google_map', 'x_shortcode_google_map' );