TUTORIAL

Google Maps API – adding multiple locations on the map using custom posts

In this article we will show you how to use Google Maps API to display a list of custom posts as pins on the map. Our task will be to create a list of places that will be saved as custom post type as a journey. Each trip will have a specific one:

  • journey point (colloquial name),
  • state,
  • date,
  • description of the journey,
  • image (will be displayed on the map as a point).

In addition, we would like to line up the locations we visited and colour the space between them. When you click on a particular location, we will display information about it.

Below the map, we will place a list of the trips, together with the places we have visited. After clicking on a given place on the list – information about the given point will be displayed on the map.

Create API_KEY to Google Maps API

Google Maps API is a very powerful application from Google that allows us to display different information on maps in very different ways. The application is located on Google Cloud Platform together with other Google applications. Unfortunately, for some time the application has become payable.

Currently, to use the Google Maps API, you need to create an account on Google Cloud Platform. After creating an account we receive 300USD to use on Google services. It is enough for our applications to create such a map. However, if you would like to create such a map on your website that generates a lot of views – the free limit will be used quickly.

How to generate key to Google Maps API

After logging into your Google Cloud Platform account we create a project of any name. We will name our project – Travels API. After creating the project, we enter the navigation menu and select APIs and services > Library..

In the library, we select the necessary applications:

  • Maps Javascript API
  • Places API.

google-maps-api-as-your-your-key

We activate both applications and proceed to create the key.

Again we return to the main panel Application and service interfaces and go to Login data. Click Create Login Details and select Application interface key.

 width=

It will redirect us to OAuth acceptance screen. We give a name to the application and select Type of users > External.

google-maps-api-as-your-your-key-api

Done! We have our key, which we copy right away.

key-api-google-maps

Create custom post type to be displayed on the map

Our Custom Post Type will have a service called ‘underside‘. Our journey will have several places on the map, so we need to use ACF Repeater Field. This is a field type that allows you to repeat posture values as many times as you need. It is an addition to a familiar plugin that allows you to add Custom Fields to posts of this type. If you don’t know how Custom Fields work, read our article: Advanced Custom Fields – custom field types WordPress.

How to add a recurring field in ACF ?

After adding our custom post type ‘subchapter’, we add a repeating field. We create a new group of fields that correspond to the type of ‘sub’ entry. Add the appropriate label and select the field type: Repetitive field. Then we add all the fields we wrote about at the beginning of the article.

acf-repeater-field-jak-orzyc

Ready! We have created a custom post type Journey, which has all the fields needed to be displayed on the map. Now you need to add some sample trips and visited places.

We are creating a widget adding a map and a list of our trips

We will create a podroze.php widget, which will add a map and a list of our travels below. For this purpose we will use WPBakery builder’s page. Of course we can also use Elementor, if you don’t know how to add widgets in these plugins – I refer to articles as standard:
Creating your own plugin that adds a widget to the Elementor plugin
Creating your own plugin that adds a widget to the WPBakery plugin

Inside the widget, we place the basic configuration and load a list of the travels and places we visited during the journey.

We create a map with locations using AJAX

Once we have the structure to which we load the map and the list of our journeys, then we move on to creating the map. To do this we go to functions.php, where we have to add our redo-script.js script and register the Google Maps API script.

If you don’t know how to work with AJAX in WordPress I invite you to read this article: How to create a custom post filter using AJAX in WordPress?

In get_travels() we add to our JSON $contents. After the initial configuration and displaying the map with places, we will move on to a more advanced configuration of our map (place, date, description, image).

AJAX script loading Google Maps API with custom posts

In functions.php we have created a get_travels() which will return a list of Places to be displayed on the map. To handle it we must first configure the map to display it. So we will create initializeMap() and codeAdress().

Google Maps – map initialization

In initializeMap() we will load the ID of our container onto the map and add to it a map with basic configuration and places which we will later load using AJAX. Additionally, when initializing the map we will use codeAdress(), which will make us see information about the place after clicking on it.

Following data to Google Maps using AJAX

Now load our destinations and display them on the map we will display in our container with id #map-container using initializeMap().

We received a view of our map with a list of journeys and places.

google-maps-custom-post-type-wordpress

Configuration of Google Maps API in WordPress

We already have the basic configuration of our map, which displays the places of travel. We would like to configure the display of our map as discussed at the beginning. Instead of pins on the map, we will display the image assigned to the place. In the place descriptions, you will find the name of the place, country, description and date. Additionally, each journey is to be connected by lines and the area forming a polygon is to be painted.

Google Maps API – loading own data

The first step is to load and display the data we would like to add to the map. To do this we have to load the rest of the data in functions.php. Apart from the name of the place we have to download also:

  • trip list,
  • name of country,
  • description,
  • date,
  • image.

We encode json_encode() and send in the $contents.

We go to our JS script – redo-script.js. We need to properly organize the JSON we received from the server and take the necessary data out of it.

We already have all the data and can pass it on to the initializeMap(), which initiates our map. We retrieve data in the constructor of our function:

Now we need to rebuild our loop for it to read the travel lists and the data contained in them.

Now in codeAddress() we can pass all the location data and set the image of our pin. We set the image using the builder icon value google.maps.Marker(). We also set the image size to 50px width and 30px height. We will pass the rest of the data to the infowindow value, which will show us the rest of the information about the destination on the screen.

In this way we got a view with pictures instead of pins and information about a given destination.

tworzenie-wlasnej-mapy-google-maps

Polygons and polylines in Google Maps API – how to select an area on the map

We move on to another requirement of our project. We would like the list under the map to become interactive – after clicking on a given place of travel, an information window on the map about that place will open. Besides, we want to mark the areas of our journeys on the map, connecting all the places of a given journey with each other and creating a polygon, which we will paint in the appropriate colour.

Interactive Google Maps API list.

In our redo-script.js script, we place an empty array called gmarkers[]. This board will store all locations of our map. It will be called when you click on an item in our list (place of travel).

The gmarkers[] will be passed in codeAddress() and add the value of the marker to it using push().

We modify our redo-script.js code accordingly:

Now we go to our podroze.php file in REDO JSComposer Additional plugin.

Add a $i=0 of our loop while(), which will count how many destinations there are and for each destination add a link to the assigned marker.

The whole code podroze.php:

Create your own area on a Google map

Now with google.maps.Polygon we create areas of our travels. We put in the first loop for(var i in travels) – responsible for displaying our travel lists – empty board poly =[], which will store the coordinates of our travel destinations. Then add the value poly. This value will store the created Polygon (area on the map corresponding to the area of our journey). We set the area colour and other values.

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