Google Map API KEYS

To set the location for your products, the plugin uses Google Maps services. So the first step is to insert the“Google Maps API Key”.
Access Google, go to https://developers.google.com/maps/documentation/javascript/get-api-key, and click on “Get a key”.

Google Maps API KEy authentication

After selecting the project, in the next step, you will obtain the key required by the plugin.

Google Map API KEY

Copy and paste the key into YITH Plugins -> Bookings -> Google Maps API Key.

settings-google-maps-api-key-1

Now access the product, type in the name of the location you wish to select and you are done.

settings-location

You can set 2 different API Keys for:

  1. Google Maps API Key
  2. Google Maps Geocode API Key

settings-google-maps-api-key-2

To set them correctly, you should create 2 different API Keys in Google Console:

1. The Google Maps API Key can be restricted through HTTP referrers.

api key settings google

2. The Google Maps Geocode API Key can be restricted through IP addresses.

api key settings google

How to enable Geocode and Places libraries in your Project

To have everything work correctly, you need to enable Geocode and Places libraries in your Google project.

Geocode library

To enable the Geocode API library, please follow this procedure:

Geocode-library

  • Now search for Geocode API and enable it.

geocode-library2

Geocode-library3

Places library

To enable the Places API library, just follow the same procedure described above.

 

How to display the map

By entering the shortcode [booking_map] within the Booking product page, the Google map linked to the product location will be automatically displayed.

location-mapThe shortcode attributes are:

  • width: map width
  • height: map height
  • zoom: map zoom level
  • type: map type, choosing from:
    • roadmap: displays the default road map view. This is the default map type.
    • satellite: displays Google Earth satellite images
    • hybrid: displays a mixture of normal and satellite views
    • terrain: displays a physical map based on terrain information.

Usage example: [booking_map width=”300px” height=”300px” zoom=”100″ type=”satellite”]