Google Maps API – dodawanie wielu lokalizacji na mapie używając custom posts

W tym artykule przedstawimy w jaki sposób użyć Google Maps API, aby wyświetlić listę custom posts w postaci pinezek na mapie. Naszym zadaniem będzie stworzenie listy miejsc, którą zapiszemy w postaci custom post type jako podróż. Każda podróż będzie miała określone:

miejsce podróży (nazwa potoczna),
państwo,
datę,
opis podróży,
obraz (będzie wyświetlany na mapie jako punkt).

Ponadto chcielibyśmy połączyć linią lokalizacje, które odwiedziliśmy i pokolorować przestrzeń pomiędzy nimi. Po kliknięciu na daną lokalizacje – wyświetlimy informacje o niej.

Pod mapą umieścimy listę podróży, wraz z miejscami, które odwiedziliśmy. Po kliknięciu na dane miejsce na liście – wyświetli się informacja na mapie o danym punkcie.

Tworzymy API_KEY do Google Maps API

Google Maps API jest to bardzo rozbudowana aplikacja od Google, dzięki której możemy w bardzo rozmaity sposób wyświetlać różne informacje na mapach. Aplikacja znajduje się na Google Cloud Platform wraz z innymi aplikacjami Google. Niestety od jakiegoś czasu aplikacja stała się płatna.

Obecnie, aby korzystać z Google Maps API, trzeba założyć konto na Google Cloud Platform. Po założeniu konta otrzymujemy 300USD do wykorzystania na usługi Google. Do naszych zastosowań na potrzeby stworzenia artykułu w zupełności wystarczy, by stworzyć taką mapę. Natomiast jeśli chcielibyście stworzyć taką mapę na swojej stronie, która generuje dużo wyświetleń – darmowy limit zostanie szybko wykorzystany.

Jak wygenerować klucz do Google Maps API

Po zalogowaniu na swoje konto Google Cloud Platform tworzymy projekt o dowolnej nazwie. My nazwiemy nasz projekt – Travels API. Po utrzworzeniu projektu, wchodzimy w menu nawigacyjne i wybieramy Interfejsy API i usługi > Biblioteka.

W bibliotece wybieramy potrzebne aplikacje czyli:

Maps Javascript API
Places API.

Aktywujemy obydwie aplikacje i przechodzimy do tworzenia klucza.

Ponownie wracamy do głównego panelu Interfejsy API i usługi i przechodzimy do Dane logowania. Klikamy Utwórz Dane Logowania i wybieramy Klucz interfejsu API.

Przekieruje nas do Ekranu akceptacji OAuth. Nadajemy nazwę aplikacji i wybieramy Typ użytkowników > Zewnętrzni.

Gotowe! Mamy nasz klucz, który od razu kopiujemy.

Tworzymy custom post type do wyświetlenia na mapie

Nasz Custom Post Type będzie miał slug o nazwie ’podroz’. Nasza podróż będzie mieć kilka miejsc na mapie, więc musimy skorzystać z ACF Repeater Field. Jest to typ pola, który pozwala powtarzać wartości posta tyle razy ile użytkownik potrzebuje. Jest to dodatek do znanego pluginu pozwalającego na dodawanie Custom Fields do postów danego typu. Jeśli nie wiesz jak działają Custom Fields – przeczytaj nasz artykuł: Advanced Custom Fields – własne typy pól WordPress.

Jak dodać pole powtarzalne w ACF ?

Po dodaniu naszego custom post type 'podroz’, dodajemy pole powtarzalne. Tworzymy nową grupę pól, które odpowiadają typowi wpisu 'podroz’. Dodajemy odpowiednią etykietę i wybieramy typ pola: Pole powtarzalne. Następnie dodajemy wszystkie pola, o których pisaliśmy na początku artykułu.

Gotowe! Mamy stworzony custom post type Podróż, który posiada wszystkie pola, potrzebne do wyświetlenia na mapie. Teraz należy dodać kilka przykładowych podróży i odwiedzonych miejsc.

Tworzymy widget dodający mapę i listę naszych podróży

Stworzymy widget podroze.php, który będzie dodawał nam mapę i pod nią listę naszych podróży. Do tego celu użyjemy page builder’a WPBakery. Oczywiście możemy również użyć Elementora, jeśli nie wiesz jak dodawać widgety w tych wtyczkach – standardowo odsyłam do artykułów:
Własny plugin dodający widget do wtyczki Elementor
Własna wtyczka dodająca widget do pluginu WPBakery

Wewnątrz widget’u umieszczamy podstawową konfigurację i wczytujemy listę z podróżami i miejscami, które odwiedziliśmy podczas podróży.

<?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(

) );

Tworzymy mapę z lokalizacjami przy pomocy AJAX

Gdy mamy już strukturę do której wczytamy mapę oraz listę naszych podróży, wówczas przechodzimy do tworzenia mapy. W tym celu przechodzimy do pliku functions.php, gdzie musimy dodać nasz skrypt redo-script.js oraz zarejestrować skrypt Google Maps API.

Jeśli nie wiesz jak działać z AJAX’em w WordPress zapraszam do przeczytania artykułu: Jak stworzyć filtr wczytujący custom post za pomocą AJAX w 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() {

}

W funkcji get_travels() dodajemy na początek miasta do naszej tablicy JSON $contents. Po początkowej konfiguracji i wyświetleniu mapy z miejscami, przejdziemy do bardziej zaawansowanej konfiguracji naszej mapy (miejsce, panśtwo, data, opis, obraz).

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();

}

Skrypt AJAX wczytujący Google Maps API z custom posts

W pliku functions.php stworzyliśmy funkcję get_travels(), która zwróci nam listę Miejsc do wyświetlenia na mapie. Aby ją obsłużyć musimy najpierw skonfigurować odpowiednio mapę do jej wyświetlenia. Stworzymy więc funkcje initializeMap() oraz codeAdress().

Google Maps – inicjalizacja mapy

W funkcji initializeMap() wczytamy ID naszego kontenera na mapę i dodamy do niej mapę z podstawową konfiguracją oraz miejscami, które później wczytamy przy pomocy AJAX. Dodatkowo przy inicjalizacji mapy skorzystamy z funkcji codeAdress(), która sprawi, że po kliknięciu na dane miejsce, pokaże nam się informacja o nim.

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 {

}

});

}

Wczytanie danych do Google Maps przy pomocy AJAX

Teraz należy wczytać nasze miejsca podróży i wyświetlić na mapie, którą wyświetlimy w naszym kontenerze o id #map-container za pomocą funkcji 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);

Otrzymaliśmy widok naszej mapy z listą podróży i miejscami.

Konfiguracja Google Maps API w WordPress

Mamy już podstawową konfigurację naszej mapy, która wyświetla miejsca podróży. Chcielibyśmy skonfigurować wyświetlanie naszej mapy w sposób omawiany na początku. Zamiast pinezek na mapie wyświetlimy obraz przypisany do danego miejsca. W opisach miejsc ma się znaleźć nazwa miejsca, państwo, opis i data. Dodatkowo każda podróż ma być połączona liniami a obszar tworzący wielokąt – ma być zamalowany.

Google Maps API – wczytywanie własnych danych

Pierwszym krokiem jest wczytanie i wyświetlenie danych, które chcielibyśmy dodać na mapę. Żeby to zrobić musimy wczytać resztę danych w pliku functions.php. Poza nazwą miejsca podróży musimy pobrać także:

listę podróży,
nazwę państwa,
opis,
date,
obraz.

Całość kodujemy json_encode() i wysyłamy w tablicy $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();

}

Przechodzimy do naszego skryptu JS – redo-script.js. Musimy odpowiednio uporządkować JSON’a, którego otrzymaliśmy z serwera i wyjąć z niego potrzebne dane.

(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);

Mamy już wszystkie dane i możemy przekazać je do funkcji initializeMap(), inicjującej naszą mapę. Pobieramy dane w konstruktorze naszej funkcji:

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

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

Teraz musimy przebudować naszą pętlę for aby odczytała listy podróży wraz z zawartymi w nich danymi.

 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);

}

Teraz w funkcji codeAddress() możemy przekazać wszystkie dane lokalizacji i ustawić obraz naszej pinezki. Obraz ustawiamy za pomocą wartości icon konstruktora google.maps.Marker(). Ustawimy też rozmiar obrazu na 50px szerokości oraz 30px wysokości. Resztę danych przekażemy do wartości infowindow, która wyświetli nam na ekranie resztę informacji o miejscu podróży.

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 {

}

});

}

W ten sposób otrzymaliśmy widok z obrazami zamiast pinezek oraz informacjami o danym miejscu podróży.

Polygons i polylines w Google Maps API – jak zaznaczyć obszar na mapie

Przechodzimy do kolejnego wymogu naszego projektu. Chcielibyśmy aby lista pod mapą stała się interaktywna – po kliknięciu na dane miejsce podróży otworzy się okno informacyjne na mapie o danym miejscu. Poza tym chcemy zaznaczyć na mapie obszary naszych podróży, łącząc ze sobą wszystkie miejsca danej podróży i tworząc wielokąt, który pomalujemy na odpowiedni kolor.

Interaktywna lista Google Maps API

W naszym skrypcie redo-script.js umieszczamy poza wszystkimi funkcjami, aby można było ją czytać także w innych plikach – pustą tablicę o nazwie gmarkers[]. Tablica ta będzie przechowywała wszystkie lokalizacje naszej mapy. Wywoływana będzie po kliknięciu na dany element naszej listy (miejsce podróży).

Tablicę gmarkers[] przekażemy w funkcji codeAddress() i dodamy do niej wartość markera za pomocą funkcji push().

Odpowiednio modyfikujemy nasz kod redo-script.js:

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

}

Teraz przechodzimy do naszego pliku podroze.php w pluginie REDO JSComposer Additional.

Dodajemy licznik $i=0 naszej pętli while(), który zliczy ile jest miejsc podróży i dla każdego miejsca doda odnośnik do przypisanego markera.

Całość kodu 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(

) );

Tworzymy własny obszar na mapie Google

Teraz za pomocą konstruktora google.maps.Polygon tworzymy obszary naszych podróży. Umieszczamy w pierwszej pętli for(var i in travels) – odpowiadającej za wyświetlenie naszych list podróży – pustą tablicę poly =[], która będzie przechowywać współrzędne naszych miejsc podróży. Następnie dodajemy wartość polilinia. Wartość ta będzie przechowywać stworzony Polygon (obszar na mapie odpowiadający obszarowi naszej podróży). Ustawiamy kolor obszaru i inne wartości.

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);

W codeAddress() ustalamy latitude oraz longitude miejsca podróży. Następnie w odpowiedniej strukturze dodajemy do zmiennej polyline, która jest przechowywana w zmiennej shape, za pomocą funkcji push(). Ostatecznie ustawiamy ścieżkę naszego obszaru za pomocą funkcji 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);

...

Wracamy do naszej funkcji initializeMap() i na końcu naszej pętli for(var i in travels) dodajemy końcową ścieżkę zwróconą przez codeAddress() do obszaru polilinia. Następnie dodajemy nasz obszar do mapy za pomocą funkcji setMap().

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

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

To już cały kod naszej mapy.

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();

}

Otrzymany widok mapy:

Podsumowanie

Google Maps API jest potężnym narzędziem, które można modyfikować na wiele sposobów. Dokumentacja aplikacji jest na prawdę doskonała i znajdziemy tam wszelką wiedzę, jaką potrzebujemy do zrealizowania założonych celów naszej aplikacji. Udało nam się zrealizować postawione na początku artykułu zadanie i zintegrować Google Maps API z funkcjonalnościami CMS WordPress. Mam nadzieję, że artykuł pomoże komuś zrozumieć lub rozwiązać spotykane przy tworzeniu takiej mapy problemy.

Zapraszam do przeczytania innych artykułów: Przydatne artykuły.