Google Maps API – ajout de plusieurs lieux sur une carte à l’aide de custom posts

Dans cet article, nous vous montrerons comment utiliser l’API Google Maps pour afficher une liste de messages personnalisés sous forme de broches sur la carte. Notre tâche consistera à créer une liste de lieux qui seront enregistrés comme type de poste personnalisé en tant que voyage. Chaque voyage aura un caractère spécifique :

lieu de voyage (nom familier),
state,
date,
description du voyage,
image (sera affichée sur la carte sous forme de point).

En outre, nous aimerions aligner les lieux que nous avons visités et colorier l’espace entre eux. Après avoir cliqué sur un lieu donné, nous afficherons des informations à son sujet.

Sous la carte, nous placerons une liste de voyages, ainsi que les lieux que nous avons visités. Après avoir cliqué sur un lieu donné de la liste – les informations sur ce point seront affichées sur la carte.

Créer une API_KEY pour l’API de Google Maps

Google Maps API est une application très puissante de Google, grâce à laquelle nous pouvons afficher différentes informations sur des cartes de manières très différentes. L’application est située sur Google Cloud Platform avec d’autres applications Google. Malheureusement, depuis un certain temps, la demande est devenue payable.

Actuellement, pour utiliser l’API Google Maps, vous devez créer un compte sur la plateforme Google Cloud. Après avoir créé un compte, nous recevons 300USD à utiliser sur les services Google. Il suffit à nos applications de créer une telle carte. Toutefois, si vous souhaitez créer une telle carte sur votre site web, qui génère beaucoup d’affichages – la limite gratuite sera rapidement utilisée.

Comment générer une clé pour l’API de Google Maps

Après vous être connecté à votre compte Google Cloud Platform, nous créons un projet de n’importe quel nom. Nous nommerons notre projet – Travels API. Après avoir créé le projet, nous entrons dans le menu de navigation et sélectionnons APIs and services &gt ; Library..

À la bibliothèque, nous sélectionnons les demandes nécessaires :

Cartes Javascript API
Places API.

Nous activons les deux applications et procédons à la création d’une clé.

Retournez à nouveau au panneau principal Interfaces API et services et allez à Données de connexion. Cliquez sur Create Login Details et sélectionnez Application interface key.

Il nous redirigera vers l’écran d’acceptation de OAuth. Nous donnons un nom à l’application et sélectionnons Type d’utilisateurs Externe.

Prêts ! Nous avons notre clé, nous la copions tout de suite.

Créer un type de poste personnalisé à afficher sur la carte

Notre service Custom Post Type aura un service appelé ‘underside‘. Notre voyage aura plusieurs endroits sur la carte, nous devons donc utiliser ACF Repeater Field. Il s’agit d’un type de champ qui vous permet de répéter les valeurs de posture autant de fois que vous le souhaitez. Il s’agit d’un ajout à un plugin connu qui permet d’ajouter Custom Fields aux messages de ce type. Si vous ne savez pas comment fonctionnent les champs personnalisés – lisez notre article : Advanced Custom Fields – types de champs WordPress personnalisés.

Comment ajouter un champ récurrent dans l’ACF ?

Après avoir ajouté notre type de message personnalisé « sous-chapitre », nous ajoutons un champ de répétition. Nous créons un nouveau groupe de champs qui correspondent au type de « sous-entrée ». Ajoutez une étiquette appropriée et sélectionnez le type de champ : Champ répétable. Ensuite, ajoutez tous les champs dont nous avons parlé au début de l’article.

Prêt! Nous avons créé un poste personnalisé de type Journey, qui possède tous les champs nécessaires pour être affiché sur la carte. Vous devez maintenant ajouter quelques exemples de voyages et de lieux visités.

Nous créons un widget qui ajoute une carte et une liste de nos voyages

Nous allons créer un widget podroze.php, qui ajoutera une carte et une liste de nos voyages en dessous. Pour cela, nous utiliserons la page WPBakery builder’s page. Bien sûr, nous pouvons aussi utiliser Elementor, si vous ne savez pas comment ajouter des widgets dans ces plugins – je parle d’articles en standard :
Propre plugin ajoutant un widget au plugin Elementor
Propre plugin ajoutant un widget au plugin WPBakery

À l’intérieur du widget, nous plaçons la configuration de base et nous chargeons la liste des voyages et des lieux que nous avons visités pendant le voyage.

<?php
if ( ! defined( 'ABSPATH' ) ) {
    die( '-1' );
}
class WPBakeryShortCode_podroze extends WPBakeryShortCode {
    protected function content( $atts, $content = null ) {
        extract( shortcode_atts( array(
            ''		=>		''
        ), $atts ) );
        $podroze = get_posts(array(
                "post_type" => 'podroz',
                'numberposts'   => -1,
                'order'            => 'ASC'
            ));
        ob_start(); ?>
        <!-- HTML DESIGN HERE -->
                <div class="podroze-container">
				    <div id="map-container">
				    </div>
                    <div class="podroze-lista-container">
                    <ol>
                    <?php foreach($podroze as $p) : ?>
                        <li><?php echo $p->post_title; ?>
                        <?php if( have_rows('miejsca_podrozy',$p->ID) ):
                        ?><ul><?php
                        while ( have_rows('miejsca_podrozy',$p->ID) ) : the_row();
                            $miejsce = get_sub_field('miejsce');
                        ?><li><?php echo $miejsce;?></li><?php
                        endwhile;
                        ?></ul><?php
                        else :
                        endif; ?>
                        </li>
			<?php endforeach ?>
                    </ol>
                    </div>
        </div>             
        <!-- HTML END DESIGN HERE -->
        <?php
        return ob_get_clean();
    }
}
vc_map( array(
    "name" 			=> __( 'Podroze', 'redo_podroze' ),
    "base" 			=> "podroze",
    "category" 		=> __('REDO Addons'),
    "description" 	=> __('Display team slider', ''),
    "icon" => plugin_dir_url( __FILE__ ).'../icons/int-banner.png',
    'params' => array(
    ),
) );

<?php

if ( ! defined( 'ABSPATH' ) ) {

die( '-1' );

}

class WPBakeryShortCode_podroze extends WPBakeryShortCode {

protected function content( $atts, $content = null ) {

extract( shortcode_atts( array(

'' => ''

), $atts ) );

$podroze = get_posts(array(

"post_type" => 'podroz',

'numberposts' => -1,

'order' => 'ASC'

));

ob_start(); ?>

</div>

<ol>

<?php foreach($podroze as $p) : ?>

<li><?php echo $p->post_title; ?>

<?php if( have_rows('miejsca_podrozy',$p->ID) ):

?><ul><?php

while ( have_rows('miejsca_podrozy',$p->ID) ) : the_row();

$miejsce = get_sub_field('miejsce');

?><li><?php echo $miejsce;?></li><?php

endwhile;

?></ul><?php

else :

endif; ?>

</li>

<?php endforeach ?>

</ol>

</div>

<?php

return ob_get_clean();

}

vc_map( array(

"name" => __( 'Podroze', 'redo_podroze' ),

"base" => "podroze",

"category" => __('REDO Addons'),

"description" => __('Display team slider', ''),

"icon" => plugin_dir_url( __FILE__ ).'../icons/int-banner.png',

'params' => array(

) );

Nous créons une carte avec des emplacements en utilisant AJAX

Une fois que nous avons la structure dans laquelle nous chargeons la carte et la liste de nos déplacements, nous passons à la création de la carte. Pour ce faire, nous allons sur functions.php, où nous devons ajouter notre redo-script.js script et enregistrer l’API Google Maps API script.

Si vous ne savez pas comment travailler avec AJAX dans WordPress, je vous invite à lire l’article : Comment créer un filtre de chargement de message personnalisé avec AJAX dans WordPress ?

function add_js_scripts_redo() {
        wp_enqueue_script( 'redoscript', get_template_directory_uri().'/js/redo-script.js', array('jquery'), 1.4, true );
		wp_enqueue_script( 'googlemaps', 'https://maps.googleapis.com/maps/api/js?key=YOURS_API_KEY' , array() , 1,1,1 );
		if ( isset($_SERVER['HTTPS']) )  
       	$protocol = 'https://';  
   		 else  
       	$protocol = 'http://';  
        wp_localize_script('redoscript', 'ajaxurl' , admin_url( 'admin-ajax.php', $protocol ) );
    }
    add_action('wp_enqueue_scripts', 'add_js_scripts_redo');
    add_action( 'wp_ajax_get_travels', 'get_travels' );
	add_action( 'wp_ajax_nopriv_get_travels', 'get_travels' );
	function get_travels() {
     }

function add_js_scripts_redo() {

wp_enqueue_script( 'redoscript', get_template_directory_uri().'/js/redo-script.js', array('jquery'), 1.4, true );

wp_enqueue_script( 'googlemaps', 'https://maps.googleapis.com/maps/api/js?key=YOURS_API_KEY' , array() , 1,1,1 );

if ( isset($_SERVER['HTTPS']) )

$protocol = 'https://';

else

$protocol = 'http://';

wp_localize_script('redoscript', 'ajaxurl' , admin_url( 'admin-ajax.php', $protocol ) );

}

add_action('wp_enqueue_scripts', 'add_js_scripts_redo');

add_action( 'wp_ajax_get_travels', 'get_travels' );

add_action( 'wp_ajax_nopriv_get_travels', 'get_travels' );

function get_travels() {

}

Dans la get_travels() nous ajoutons à notre JSON $contents. Après la configuration initiale et l’affichage de la carte avec les lieux, nous passerons à une configuration plus avancée de notre carte (lieu, date, description, image).

function get_travels() {
			$travelsQuery = new WP_Query(array( 
				'post_type' => 'podroz',
				'posts_per_page'   => -1,
				'order'   => 'ASC'
			));
		$travels=($travelsQuery->posts);
		$travelsString = [];
		$contents = [];
        foreach($travels as $t) {
			if( have_rows('miejsca_podrozy',$t->ID) ):
				while ( have_rows('miejsca_podrozy',$t->ID) ) : the_row();
					$miejsce = get_sub_field('miejsce');
					$travelsString[$miejsce] = $miejsce;
				endwhile;
			endif;
		}
		$contents = json_encode([ $travelsString]);
		echo $contents;
        die();
	}

function get_travels() {

$travelsQuery = new WP_Query(array(

'post_type' => 'podroz',

'posts_per_page' => -1,

'order' => 'ASC'

));

$travels=($travelsQuery->posts);

$travelsString = [];

$contents = [];

foreach($travels as $t) {

if( have_rows('miejsca_podrozy',$t->ID) ):

while ( have_rows('miejsca_podrozy',$t->ID) ) : the_row();

$miejsce = get_sub_field('miejsce');

$travelsString[$miejsce] = $miejsce;

endwhile;

endif;

}

$contents = json_encode([ $travelsString]);

echo $contents;

die();

}

AJAX script loading Google Maps API with custom posts

Dans le fichier functions.php, nous avons créé le get_travels(), qui renvoie une liste de lieux à afficher sur la carte. Pour le gérer, il faut d’abord configurer la carte pour l’afficher. Nous allons créer la initializeMap() et codeAdress().

Google Maps – initialisation de la carte

Dans initializeMap() nous allons charger l’ID de notre conteneur sur la carte et y ajouter une carte avec la configuration de base et les lieux qui seront chargés plus tard en utilisant AJAX. En outre, lors de l’initialisation de la carte, nous utiliserons la fonction codeAdress(), qui nous fera voir des informations sur le lieu après avoir cliqué dessus.

function initializeMap(mapID, addresses) {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(50.8227222, 4.3486888);
    var mapOptions = {
        zoom: 4,
        center: latlng
    }
    map = new google.maps.Map(document.getElementById(mapID), mapOptions);
    var infowindow = new google.maps.InfoWindow({});
    for (var k in addresses) {
        if (addresses.hasOwnProperty(k)) {
            codeAddress(map, geocoder, k, addresses[k], infowindow);
        }
    }
}
function codeAddress(map, geocoder, name, address, infowindow) {
    console.log(address);
                    geocoder.geocode({'address': address}, function (results, status) {
        if (status == 'OK') {
            var marker = new google.maps.Marker({
                map: map,
                position: results[0].geometry.location,
                title: name
            });
            google.maps.event.addListener(marker, 'click', (function (marker) {
                return function () {
                    infowindow.setContent('<h3>' + name + '</h3>' + '<div class="infoAddress">' + address + '</div>');
                    infowindow.open(map, marker);
                }
            })(marker));
        } else {
        }
    });
}

function initializeMap(mapID, addresses) {

geocoder = new google.maps.Geocoder();

var latlng = new google.maps.LatLng(50.8227222, 4.3486888);

var mapOptions = {

zoom: 4,

center: latlng

}

map = new google.maps.Map(document.getElementById(mapID), mapOptions);

var infowindow = new google.maps.InfoWindow({});

for (var k in addresses) {

if (addresses.hasOwnProperty(k)) {

codeAddress(map, geocoder, k, addresses[k], infowindow);

}

function codeAddress(map, geocoder, name, address, infowindow) {

console.log(address);

geocoder.geocode({'address': address}, function (results, status) {

if (status == 'OK') {

var marker = new google.maps.Marker({

map: map,

position: results[0].geometry.location,

title: name

});

google.maps.event.addListener(marker, 'click', (function (marker) {

return function () {

infowindow.setContent('<h3>' + name + '</h3>' + '<div class="infoAddress">' + address + '</div>');

infowindow.open(map, marker);

}

})(marker));

} else {

}

});

}

Suivre les données dans Google Maps avec AJAX

Chargez maintenant nos destinations et affichez-les sur la carte que nous allons afficher dans notre conteneur avec id #map-container using initializeMap().

(function($){
    $(document).ready(function()
    {
        $.post(
            ajaxurl,
            {
                'action' : 'get_travels',
            },
            function( response ) {
                $data=$.parseJSON(response);
                var miejsca = [];
                miejsca = $data[0];
                initializeMap("map-container", miejsca);
            }
        );
    });
})(jQuery);

(function($){

$(document).ready(function()

{

$.post(

ajaxurl,

{

'action' : 'get_travels',

function( response ) {

$data=$.parseJSON(response);

var miejsca = [];

miejsca = $data[0];

initializeMap("map-container", miejsca);

}

);

});

})(jQuery);

Nous avons reçu une vue de notre carte avec une liste de voyages et de lieux.

Configurer l’API Google Maps dans WordPress

Nous avons déjà une configuration de base de notre carte, qui affiche les lieux de déplacement. Nous aimerions configurer l’affichage de notre carte comme nous l’avons évoqué au début. Au lieu d’épingles sur la carte, nous afficherons l’image attribuée au lieu. Dans les descriptions de lieux, vous trouverez le nom du lieu, le pays, la description et la date. En outre, chaque voyage doit être relié par des lignes et la zone formant un polygone doit être peinte.

Google Maps API – chargement de ses propres données

La première étape consiste à charger et à afficher les données que nous souhaitons ajouter à la carte. Pour ce faire, nous devons charger le reste des données dans functions.php. Outre le nom de l’endroit, nous devons également télécharger :

trip list,
nom du pays,
description,
date,
image.

Nous codons json_encode() et envoyons dans un tableau $contents.

function get_travels() {
			$travelsQuery = new WP_Query(array( 
				'post_type' => 'podroz',
				'posts_per_page'   => -1,
				'order'   => 'ASC'
			));
		$travels=($travelsQuery->posts);
		$travelsString = [];
		$namesString = [];
		$capitalsString = [];
		$descriptionsString = [];
		$dateString = [];
		$imagesString = [];
		$contents = [];
        foreach($travels as $t) {
			if( have_rows('miejsca_podrozy',$t->ID) ):
				$travelsString[$t->post_name] = $t->post_name;
				while ( have_rows('miejsca_podrozy',$t->ID) ) : the_row();
					$miejsce = get_sub_field('miejsce');
					$obraz = get_sub_field('obraz');
					$data = get_sub_field('data');
					$opis = get_sub_field('opis_podrozy');
					$panstwo = get_sub_field('panstwo');
				$namesString[$t->post_name][$miejsce] = $miejsce;
				$imagesString[$t->post_name][$miejsce] = $obraz;
				$dateString[$t->post_name][$miejsce] = $data;
				$capitalsString[$t->post_name][$miejsce] = $panstwo;
				$descriptionsString[$t->post_name][$miejsce] = $opis;
				endwhile;
			endif;
		}
		$contents = json_encode([$travelsString,$namesString,$imagesString,$capitalsString,$dateString,$descriptionsString] );
		echo $contents;
        die();
	}

function get_travels() {

$travelsQuery = new WP_Query(array(

'post_type' => 'podroz',

'posts_per_page' => -1,

'order' => 'ASC'

));

$travels=($travelsQuery->posts);

$travelsString = [];

$namesString = [];

$capitalsString = [];

$descriptionsString = [];

$dateString = [];

$imagesString = [];

$contents = [];

foreach($travels as $t) {

if( have_rows('miejsca_podrozy',$t->ID) ):

$travelsString[$t->post_name] = $t->post_name;

while ( have_rows('miejsca_podrozy',$t->ID) ) : the_row();

$miejsce = get_sub_field('miejsce');

$obraz = get_sub_field('obraz');

$data = get_sub_field('data');

$opis = get_sub_field('opis_podrozy');

$panstwo = get_sub_field('panstwo');

$namesString[$t->post_name][$miejsce] = $miejsce;

$imagesString[$t->post_name][$miejsce] = $obraz;

$dateString[$t->post_name][$miejsce] = $data;

$capitalsString[$t->post_name][$miejsce] = $panstwo;

$descriptionsString[$t->post_name][$miejsce] = $opis;

endwhile;

endif;

}

$contents = json_encode([$travelsString,$namesString,$imagesString,$capitalsString,$dateString,$descriptionsString] );

echo $contents;

die();

}

Nous passons à notre script JS – redo-script.js. Nous devons organiser correctement le JSON que nous avons reçu du serveur et y supprimer les données nécessaires.

(function($){
    $(document).ready(function()
    {
        $.post(
            ajaxurl,
            {
                'action' : 'get_travels',
            },
            function( response ) {
                $data=$.parseJSON(response);
                var podroze = $data[0];
                var miejsca = $data[1];
                var obrazy = $data[2];
                var panstwa = $data[3];
                var daty = $data[4];
                var opisy = $data[5];
                
                initializeMap("map-container", podroze, miejsca, obrazy, panstwa, daty, opisy);
            }
        );
    });
})(jQuery);

(function($){

$(document).ready(function()

{

$.post(

ajaxurl,

{

'action' : 'get_travels',

function( response ) {

$data=$.parseJSON(response);

var podroze = $data[0];

var miejsca = $data[1];

var obrazy = $data[2];

var panstwa = $data[3];

var daty = $data[4];

var opisy = $data[5];

initializeMap("map-container", podroze, miejsca, obrazy, panstwa, daty, opisy);

}

);

});

})(jQuery);

Nous avons déjà toutes les données et nous pouvons les transmettre à la initialiserMap(), ce qui lance notre carte. Nous récupérons les données dans le constructeur de notre fonction :

function initializeMap(mapID, travels, addresses, images, capitals, dates, descriptions) {}

1	function initializeMap(mapID, travels, addresses, images, capitals, dates, descriptions) {}

Nous devons maintenant reconstruire notre boucle pour qu’elle puisse lire les listes de voyage et leurs données.

 for (var i in travels) {
        for (var k in addresses[i]) {
                if (addresses[i].hasOwnProperty(k)) {
                    codeAddress(map, geocoder, k, addresses[i][k], images[i][k], capitals[i][k], dates[i][k], descriptions[i][k], infowindow);
        }
     }
}

for (var i in travels) {

for (var k in addresses[i]) {

if (addresses[i].hasOwnProperty(k)) {

codeAddress(map, geocoder, k, addresses[i][k], images[i][k], capitals[i][k], dates[i][k], descriptions[i][k], infowindow);

}

Maintenant, dans codeAddress() nous pouvons transmettre toutes les données de localisation et définir l’image de notre pin. Nous avons défini l’image en utilisant la valeur de l’icône du constructeur google.maps.Marker(). Nous allons également fixer la taille de l’image à 50px en largeur et 30px en hauteur. Le reste des données sera transmis à la valeur de l’infowindow, qui nous montrera le reste des informations sur la destination à l’écran.

function codeAddress(map, geocoder, name, address, image, capital, date, description, infowindow) {
        geocoder.geocode({'address': address}, function (results, status) {
        if (status == 'OK') {
            var pos = results[0].geometry.location;
            var icon = {
                url: image, // url
                scaledSize: new google.maps.Size(50, 30), // scaled size
                origin: new google.maps.Point(0,0), // origin
                anchor: new google.maps.Point(0, 0) // anchor
            };
            var marker = new google.maps.Marker({
                map: map,
                position: pos,
                title: name,
                icon: icon
            });
            google.maps.event.addListener(marker, 'click', (function (marker) {
                return function () {
                    infowindow.setContent('<h3>' + name + '</h3>' + '<div class="infoAddress"><div class="panstwo">'+capital+'</div><div class="data">'+
                    date +'</div><div class="opis">'+ description +'</div>');
                    infowindow.open(map, marker);
                }
            })(marker));
        } else {
        }
    });
}

function codeAddress(map, geocoder, name, address, image, capital, date, description, infowindow) {

geocoder.geocode({'address': address}, function (results, status) {

if (status == 'OK') {

var pos = results[0].geometry.location;

var icon = {

url: image, // url

scaledSize: new google.maps.Size(50, 30), // scaled size

origin: new google.maps.Point(0,0), // origin

anchor: new google.maps.Point(0, 0) // anchor

};

var marker = new google.maps.Marker({

map: map,

position: pos,

title: name,

icon: icon

});

google.maps.event.addListener(marker, 'click', (function (marker) {

return function () {

infowindow.setContent('<h3>' + name + '</h3>' + '<div class="infoAddress"><div class="panstwo">'+capital+'</div><div class="data">'+

date +'</div><div class="opis">'+ description +'</div>');

infowindow.open(map, marker);

}

})(marker));

} else {

}

});

}

De cette façon, nous avons obtenu une vue avec des images au lieu d’épingles et des informations sur une destination de voyage donnée.

Polygones et polylignes dans l’API Google Maps – comment sélectionner une zone sur la carte

Nous passons à l’exigence suivante de notre projet. Nous aimerions que la liste sous la carte devienne interactive – après avoir cliqué sur un lieu de voyage donné, une fenêtre d’information sur la carte concernant ce lieu s’ouvrira. En outre, nous voulons marquer les zones de nos voyages sur la carte, en reliant entre eux tous les lieux d’un voyage donné et en créant un polygone, que nous peindrons de la couleur appropriée.

Interactive Google Maps API

list.
Dans notre script redo-script.js , nous plaçons un tableau vide appelé gmarkers[]. Ce tableau conservera tous les emplacements de notre carte. Il sera appelé lorsque vous cliquerez sur un élément de notre liste (lieu de voyage).

Les marqueurs[] seront passés dans codeAddress() et ajoutez-y la valeur du marqueur en utilisant push().

Nous modifions notre code redo-script.js en conséquence :

var gmarkers = []; //Dodajemy na początku pliku
if (addresses[i].hasOwnProperty(k)) {
//modyfikujemy wywołanie funkcji codeAddress o nową tablicę - gmarkers[]
    codeAddress(map, geocoder, k, addresses[i][k], images[i][k], capitals[i][k], dates[i][k], descriptions[i][k], infowindow, gmarkers);
}
function codeAddress(map, geocoder, name, address, image, capital, date, description, infowindow, markers) {
//odbieramy tablicę gmarkers w zmiennej markers
var marker = new google.maps.Marker({
map: map,
position: pos,
title: name,
icon: icon
});
markers.push(marker); // po dodaniu markera dodajemy go do naszej tablicy
}

var gmarkers = []; //Dodajemy na początku pliku

if (addresses[i].hasOwnProperty(k)) {

//modyfikujemy wywołanie funkcji codeAddress o nową tablicę - gmarkers[]

codeAddress(map, geocoder, k, addresses[i][k], images[i][k], capitals[i][k], dates[i][k], descriptions[i][k], infowindow, gmarkers);

}

function codeAddress(map, geocoder, name, address, image, capital, date, description, infowindow, markers) {

//odbieramy tablicę gmarkers w zmiennej markers

var marker = new google.maps.Marker({

map: map,

position: pos,

title: name,

icon: icon

});

markers.push(marker); // po dodaniu markera dodajemy go do naszej tablicy

}

Nous passons maintenant à notre fichier podroze.php dans REDO JSComposer Additional plugin.

Ajouter un compteur $i=0 de notre boucle while(), qui comptera le nombre de destinations et pour chaque destination ajoutera un lien au marqueur attribué.

Tout le code podroze.php :

<?php
if ( ! defined( 'ABSPATH' ) ) {
    die( '-1' );
}
class WPBakeryShortCode_podroze extends WPBakeryShortCode {
    protected function content( $atts, $content = null ) {
        extract( shortcode_atts( array(
            ''		=>		''
        ), $atts ) );
        $podroze = get_posts(array(
                "post_type" => 'podroz',
                'numberposts'   => -1,
                'order'            => 'ASC'
            ));
            $i = 0;
        ob_start(); ?>
        
        <!-- HTML DESIGN HERE -->
                <div class="podroze-container">
				    <div id="map-container">
				    </div>
                    <div class="podroze-lista-container">
                    <ol>
                    <?php foreach($podroze as $p) : ?>
                        <li><?php echo $p->post_title; ?>
                        <?php if( have_rows('miejsca_podrozy',$p->ID) ):
                        ?><ul><?php
                        while ( have_rows('miejsca_podrozy',$p->ID) ) : the_row();
                            $miejsce = get_sub_field('miejsce');
                        ?><li><a href='javascript:google.maps.event.trigger(gmarkers[<?php echo $i ?>],"click");'><?php echo $miejsce; $i++; ?></a></li><?php
                        endwhile;
                        ?></ul><?php
                        else :
                        endif; ?>
                        </li>
			<?php endforeach ?>
                    </ol>
                    </div>
        </div>             
        <!-- HTML END DESIGN HERE -->
        <?php
        return ob_get_clean();
    }
}
vc_map( array(
    "name" 			=> __( 'Podroze', 'redo_podroze' ),
    "base" 			=> "podroze",
    "category" 		=> __('REDO Addons'),
    "description" 	=> __('Display team slider', ''),
    "icon" => plugin_dir_url( __FILE__ ).'../icons/int-banner.png',
    'params' => array(
    ),
) );

<?php

if ( ! defined( 'ABSPATH' ) ) {

die( '-1' );

}

class WPBakeryShortCode_podroze extends WPBakeryShortCode {

protected function content( $atts, $content = null ) {

extract( shortcode_atts( array(

'' => ''

), $atts ) );

$podroze = get_posts(array(

"post_type" => 'podroz',

'numberposts' => -1,

'order' => 'ASC'

));

$i = 0;

ob_start(); ?>

</div>

<ol>

<?php foreach($podroze as $p) : ?>

<li><?php echo $p->post_title; ?>

<?php if( have_rows('miejsca_podrozy',$p->ID) ):

?><ul><?php

while ( have_rows('miejsca_podrozy',$p->ID) ) : the_row();

$miejsce = get_sub_field('miejsce');

?><li><a href='javascript:google.maps.event.trigger(gmarkers[<?php echo $i ?>],"click");'><?php echo $miejsce; $i++; ?></a></li><?php

endwhile;

?></ul><?php

else :

endif; ?>

</li>

<?php endforeach ?>

</ol>

</div>

<?php

return ob_get_clean();

}

vc_map( array(

"name" => __( 'Podroze', 'redo_podroze' ),

"base" => "podroze",

"category" => __('REDO Addons'),

"description" => __('Display team slider', ''),

"icon" => plugin_dir_url( __FILE__ ).'../icons/int-banner.png',

'params' => array(

) );

Créez votre propre zone sur une carte Google

Maintenant avec google.maps.Polygon nous créons des zones de nos voyages. Nous mettons dans la première boucle for(var i in travels) – responsable de l’affichage de nos listes de voyages – tableau vide poly =[], qui enregistrera les coordonnées de nos destinations de voyage. Ensuite, ajoutez poly. Cette valeur enregistrera la Polygon (la zone de la carte correspondant à la région de notre voyage). Nous fixons la couleur de la zone et d’autres valeurs.

for (var i in travels) {
        var poly = [];
        var polilinia = new google.maps.Polygon({
            strokeColor:	'#FF0000',
            strokeWeight:	0.8,
            strokeOpacity:	2,
            fillColor:		'#FF0000',
            fillOpacity:	0.35
        });
...

for (var i in travels) {

var poly = [];

var polilinia = new google.maps.Polygon({

strokeColor: '#FF0000',

strokeWeight: 0.8,

strokeOpacity: 2,

fillColor: '#FF0000',

fillOpacity: 0.35

});

...

Przekazujemy tablicę poly[] i zmienną polilinia do funkcji codeAddress().

codeAddress(map, geocoder, k, addresses[i][k], images[i][k], capitals[i][k], dates[i][k], descriptions[i][k], infowindow, poly, polilinia, gmarkers);

1	codeAddress(map, geocoder, k, addresses[i][k], images[i][k], capitals[i][k], dates[i][k], descriptions[i][k], infowindow, poly, polilinia, gmarkers);

Dans codeAddress() nous définissons latitude and longitude destinations de voyage. Ensuite, ajoutez à la variable polyline, qui est stockée dans la variable shape, using the push(). Enfin, nous avons défini le chemin de notre zone en utilisant setPath().

function codeAddress(map, geocoder, name, address, image, capital, date, description, infowindow, shape, polyline, markers) {
    console.log(address);
        geocoder.geocode({'address': address}, function (results, status) {
        if (status == 'OK') {
            var pos = results[0].geometry.location;
            var latitude = pos.lat();
            var longitude = pos.lng(); 
            shape.push({lat: latitude, lng: longitude});
            polyline.setPath(shape);
...

function codeAddress(map, geocoder, name, address, image, capital, date, description, infowindow, shape, polyline, markers) {

console.log(address);

geocoder.geocode({'address': address}, function (results, status) {

if (status == 'OK') {

var pos = results[0].geometry.location;

var latitude = pos.lat();

var longitude = pos.lng();

shape.push({lat: latitude, lng: longitude});

polyline.setPath(shape);

...

Nous revenons à notre initializeMap() et à la fin de notre boucle for(var and in travels) nous ajoutons le chemin final renvoyé par codeAddress() to polyline. Ensuite, ajoutez notre zone à la carte en utilisant setMap().

polilinia.setPath(poly);
polilinia.setMap(map);

1 2	polilinia.setPath(poly); polilinia.setMap(map);

C’est le code complet de notre carte.

redo-script.js:

var gmarkers = [];
function initializeMap(mapID, travels, addresses, images, capitals, dates, descriptions) {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(50.8227222, 4.3486888);
    var mapOptions = {
        zoom: 4,
        center: latlng
    }
    map = new google.maps.Map(document.getElementById(mapID), mapOptions);
    var infowindow = new google.maps.InfoWindow({});
    
    for (var i in travels) {
        var poly = [];
        var polilinia = new google.maps.Polygon({
            strokeColor:	'#FF0000',
            strokeWeight:	0.8,
            strokeOpacity:	2,
            fillColor:		'#FF0000',
            fillOpacity:	0.35
        });
        for (var k in addresses[i]) {
                if (addresses[i].hasOwnProperty(k)) {
                    codeAddress(map, geocoder, k, addresses[i][k], images[i][k], capitals[i][k], dates[i][k], descriptions[i][k], infowindow, poly, polilinia, gmarkers);
                }
        }
        polilinia.setPath(poly);
        polilinia.setMap(map);
    }
    
}
function codeAddress(map, geocoder, name, address, image, capital, date, description, infowindow, shape, polyline, markers) {
        geocoder.geocode({'address': address}, function (results, status) {
        if (status == 'OK') {
            var pos = results[0].geometry.location;
            var latitude = pos.lat();
            var longitude = pos.lng(); 
            shape.push({lat: latitude, lng: longitude});
            polyline.setPath(shape);
            var icon = {
                url: image, // url
                scaledSize: new google.maps.Size(50, 30), // scaled size
                origin: new google.maps.Point(0,0), // origin
                anchor: new google.maps.Point(0, 0) // anchor
            };
            var marker = new google.maps.Marker({
                map: map,
                position: pos,
                title: name,
                icon: icon
            });
            markers.push(marker);
            google.maps.event.addListener(marker, 'click', (function (marker) {
                return function () {
                    infowindow.setContent('<h3>' + name + '</h3>' + '<div class="infoAddress"><div class="panstwo">'+capital+'</div><div class="data">'+
                    date +'</div><div class="opis">'+ description +'</div>');
                    infowindow.open(map, marker);
                }
            })(marker));
        } else {
        }
    });
}
(function($){
    $(document).ready(function()
    {
        $.post(
            ajaxurl,
            {
                'action' : 'get_travels',
            },
            function( response ) {
                $data=$.parseJSON(response);
                var podroze = $data[0];
                var miejsca = $data[1];
                var obrazy = $data[2];
                var panstwa = $data[3];
                var daty = $data[4];
                var opisy = $data[5];
                
                initializeMap("map-container", podroze, miejsca, obrazy, panstwa, daty, opisy);
            }
        );
    });
})(jQuery);

var gmarkers = [];

function initializeMap(mapID, travels, addresses, images, capitals, dates, descriptions) {

geocoder = new google.maps.Geocoder();

var latlng = new google.maps.LatLng(50.8227222, 4.3486888);

var mapOptions = {

zoom: 4,

center: latlng

}

map = new google.maps.Map(document.getElementById(mapID), mapOptions);

var infowindow = new google.maps.InfoWindow({});

for (var i in travels) {

var poly = [];

var polilinia = new google.maps.Polygon({

strokeColor: '#FF0000',

strokeWeight: 0.8,

strokeOpacity: 2,

fillColor: '#FF0000',

fillOpacity: 0.35

});

for (var k in addresses[i]) {

if (addresses[i].hasOwnProperty(k)) {

codeAddress(map, geocoder, k, addresses[i][k], images[i][k], capitals[i][k], dates[i][k], descriptions[i][k], infowindow, poly, polilinia, gmarkers);

}

polilinia.setPath(poly);

polilinia.setMap(map);

}

function codeAddress(map, geocoder, name, address, image, capital, date, description, infowindow, shape, polyline, markers) {

geocoder.geocode({'address': address}, function (results, status) {

if (status == 'OK') {

var pos = results[0].geometry.location;

var latitude = pos.lat();

var longitude = pos.lng();

shape.push({lat: latitude, lng: longitude});

polyline.setPath(shape);

var icon = {

url: image, // url

scaledSize: new google.maps.Size(50, 30), // scaled size

origin: new google.maps.Point(0,0), // origin

anchor: new google.maps.Point(0, 0) // anchor

};

var marker = new google.maps.Marker({

map: map,

position: pos,

title: name,

icon: icon

});

markers.push(marker);

google.maps.event.addListener(marker, 'click', (function (marker) {

return function () {

infowindow.setContent('<h3>' + name + '</h3>' + '<div class="infoAddress"><div class="panstwo">'+capital+'</div><div class="data">'+

date +'</div><div class="opis">'+ description +'</div>');

infowindow.open(map, marker);

}

})(marker));

} else {

}

});

}

(function($){

$(document).ready(function()

{

$.post(

ajaxurl,

{

'action' : 'get_travels',

function( response ) {

$data=$.parseJSON(response);

var podroze = $data[0];

var miejsca = $data[1];

var obrazy = $data[2];

var panstwa = $data[3];

var daty = $data[4];

var opisy = $data[5];

initializeMap("map-container", podroze, miejsca, obrazy, panstwa, daty, opisy);

}

);

});

})(jQuery);

functions.php:

function add_js_scripts_redo() {
        wp_enqueue_script( 'redoscript', get_template_directory_uri().'/js/redo-script.js', array('jquery'), 1,1,1 ) );
		wp_enqueue_script( 'googlemaps', 'https://maps.googleapis.com/maps/api/js?key=Your_KEY_API' , array() , 1,1,1 );
		if ( isset($_SERVER['HTTPS']) )  
       	$protocol = 'https://';  
   		 else  
       	$protocol = 'http://';  
		   
        // pass Ajax Url to script.js
        wp_localize_script('redoscript', 'ajaxurl' , admin_url( 'admin-ajax.php', $protocol ) );
    }
    add_action('wp_enqueue_scripts', 'add_js_scripts_redo');

    add_action( 'wp_ajax_get_travels', 'get_travels' );
	add_action( 'wp_ajax_nopriv_get_travels', 'get_travels' );
	function get_travels() {
			$travelsQuery = new WP_Query(array( 
				'post_type' => 'podroz',
				'posts_per_page'   => -1,
				'order'   => 'ASC'
			));
		$travels=($travelsQuery->posts);
		$travelsString = [];
		$namesString = [];
		$capitalsString = [];
		$descriptionsString = [];
		$dateString = [];
		$imagesString = [];
		$contents = [];
        foreach($travels as $t) {
			if( have_rows('miejsca_podrozy',$t->ID) ):
				$travelsString[$t->post_name] = $t->post_name;
				while ( have_rows('miejsca_podrozy',$t->ID) ) : the_row();
					$miejsce = get_sub_field('miejsce');
					$obraz = get_sub_field('obraz');
					$data = get_sub_field('data');
					$opis = get_sub_field('opis_podrozy');
					$panstwo = get_sub_field('panstwo');
				$namesString[$t->post_name][$miejsce] = $miejsce;
				$imagesString[$t->post_name][$miejsce] = $obraz;
				$dateString[$t->post_name][$miejsce] = $data;
				$capitalsString[$t->post_name][$miejsce] = $panstwo;
				$descriptionsString[$t->post_name][$miejsce] = $opis;
				endwhile;
			endif;
		}
		$contents = json_encode([$travelsString,$namesString,$imagesString,$capitalsString,$dateString,$descriptionsString] );
		echo $contents;
        die();
	}

function add_js_scripts_redo() {

wp_enqueue_script( 'redoscript', get_template_directory_uri().'/js/redo-script.js', array('jquery'), 1,1,1 ) );

wp_enqueue_script( 'googlemaps', 'https://maps.googleapis.com/maps/api/js?key=Your_KEY_API' , array() , 1,1,1 );

if ( isset($_SERVER['HTTPS']) )

$protocol = 'https://';

else

$protocol = 'http://';

// pass Ajax Url to script.js

wp_localize_script('redoscript', 'ajaxurl' , admin_url( 'admin-ajax.php', $protocol ) );

}

add_action('wp_enqueue_scripts', 'add_js_scripts_redo');

add_action( 'wp_ajax_get_travels', 'get_travels' );

add_action( 'wp_ajax_nopriv_get_travels', 'get_travels' );

function get_travels() {

$travelsQuery = new WP_Query(array(

'post_type' => 'podroz',

'posts_per_page' => -1,

'order' => 'ASC'

));

$travels=($travelsQuery->posts);

$travelsString = [];

$namesString = [];

$capitalsString = [];

$descriptionsString = [];

$dateString = [];

$imagesString = [];

$contents = [];

foreach($travels as $t) {

if( have_rows('miejsca_podrozy',$t->ID) ):

$travelsString[$t->post_name] = $t->post_name;

while ( have_rows('miejsca_podrozy',$t->ID) ) : the_row();

$miejsce = get_sub_field('miejsce');

$obraz = get_sub_field('obraz');

$data = get_sub_field('data');

$opis = get_sub_field('opis_podrozy');

$panstwo = get_sub_field('panstwo');

$namesString[$t->post_name][$miejsce] = $miejsce;

$imagesString[$t->post_name][$miejsce] = $obraz;

$dateString[$t->post_name][$miejsce] = $data;

$capitalsString[$t->post_name][$miejsce] = $panstwo;

$descriptionsString[$t->post_name][$miejsce] = $opis;

endwhile;

endif;

}

$contents = json_encode([$travelsString,$namesString,$imagesString,$capitalsString,$dateString,$descriptionsString] );

echo $contents;

die();

}

La vue de la carte reçue :

Summing

Google Maps API est un outil puissant qui peut être modifié de nombreuses façons. La documentation de la demande est vraiment parfaite et nous y trouverons toutes les connaissances dont nous avons besoin pour atteindre les objectifs de notre demande. Nous avons réussi à accomplir la tâche fixée au début de l’article et à intégrer l’API Google Maps avec la fonctionnalité CMS WordPress. J’espère que cet article aidera quelqu’un à comprendre ou à résoudre les problèmes rencontrés lors de la création d’une telle carte.

Je vous invite à lire d’autres articles : Articles utiles.