0

I am looking to implement this code on my wordpress site as efficiently as possible

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

and I only want the JS to load on posts/pages that I will be using the map. Can't figure out how to start with this!

EDIT:

What if I use the enqueue part inside the function ? Is this a good construct?

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' );
  • I'm not entirely sure you'll be able to focus in on whether the page has the code or not, but you could use wp_enqueue_scripts with a condition as seen in this question. – Greg McMullen Aug 19 '16 at 19:23
  • If you have additional information or questions that pertains to your original questions, please click the "Edit" button above and add in that information. The Answer section ( below ) is specifically for answers. – Howdy_McGee Aug 19 '16 at 20:44
0

First of all enqueue the Google Maps API js in the right way. look for a function which is hooked on wp_enqueue_scripts and wp_enqueue_script() to enqueue Google Maps API

function wp_mk_scripts() {
    if ( is_singular() ) {
        wp_enqueue_script( 'wp-mk-maps-js', 'https://maps.googleapis.com/maps/api/js', array( 'jquery' ), null, true );
        wp_enqueue_script( 'wp-mk-gmaps-function', get_stylesheet_directory_uri() . '/js/maps.js', array( 'jquery' ), null, true );
    }
}
add_action( 'wp_enqueue_scripts', 'wp_mk_scripts' );

then in your theme_folder/js/maps.js paste the map code between <script></script> tags in Style Google Maps

Now call the <div id="map"></div> div anywhere in the template to display the map.

  • yes but this loads the script everywhere.. What if I create a shortcode and put the script there like my answer below ? – Joanna Mikalai Aug 19 '16 at 19:34
  • wrap the wp_enqueue_script() function in if ( is_singular() ) {} to load the script only on posts and pages. i have updated the answer above. – Aamer Shahzad Aug 19 '16 at 19:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.