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.