Un shortcode pour ajouter Google Maps dans vos pages

Google Maps est un outil de localisation incontournable, si ce n’est le meilleur disponible sur le marché. Pratique pour indiquer la localisation de votre commerce, de votre entreprise ou de votre adresse. Les raisons d’intégrer cet outil sur votre site ou votre blog sont nombreuses.

De nombreux plugins proposent d’intégrer des plans Google Maps dans vos articles ou sur vos pages, mais ceux-ci alourdissent considérablement le chargement de celles-ci avec des options bien souvent inutiles. Voici donc comment intégrer Google Maps avec un shortcode. De cette façon, aucun chargement inutile, juste l’affichage des cartes voulues en quelques clics.

Pour créer notre shortcode il suffit d’ajouter la fonction suivante à votre fichier functions.php :

// insérer Google Map via un Shortcode
function wpln_googlemaps_shortcode( $atts, $content = null ) {

    extract( shortcode_atts( array(
        "width" => '640',
        "height" => '480',
        "src" => ''
    ), $atts ) );

    return '<iframe src="' . $src . '&amp;output=embed" width="' . $width . '" height="' . $height . '" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>';

}
add_shortcode( "googlemaps", "wpln_googlemaps_shortcode" );

Pour utiliser votre shortcode rien de plus simple, ajoutez dans une page ou dans un article le shortcode suivant :

[googlemaps width="400" height="300" src="[map-url]"]

Vous avez 3 paramètres :

  1. Width (largeur) de la carte à afficher en pixels
  2. Height (hauteur) de la carte à afficher en pixels
  3. Source ou adresse de la carte Google Maps.

Pour la source (adresse) de la carte, copiez/collez simplement l’adresse url de la carte Google Maps que vous pouvez récupérer en recherchant votre bâtiment sur http://maps.google.fr

Par exemple pour afficher la carte du palais de l’Elysée il vous suffit d’ajouter l’adresse suivante : « https://www.google.fr/maps/place/Le+Palais+de+L’%C3%89lys%C3%A9e/@48.8704191,2.3145652,17z/data=!3m1!4b1!4m2!3m1!1s0x47e66fce8ca6e347:0x2e38f4467a582f22« 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *