# Google & Map

### 1: Google Services

Go to **WooCommerce > Settings > Booking & Rental > Gogole & Map >> Choose "Google" option**

<figure><img src="/files/qE9bz2MDhGXl3loRMSGi" alt=""><figcaption></figcaption></figure>

* **API Key**: This API applies to Google services such as Maps and Calendar. [Click here to register google api key](https://console.cloud.google.com/)
* **Map Zoom**: zoom of map at frontend
* **Default Latitude Map**:  Default position of Map.
* **Default Longitude Map**:  Default position of Map.
* **Client ID**: Only applies when syncing with Google Calendar

### 1.1) Setup Google Map service

#### **Step 1**: Create API Key

&#x20;[Click here to register google api key](https://console.cloud.google.com/)

* **Create a project**

<div><figure><img src="/files/0cVeEcpKPv4FNIg9jc6g" alt=""><figcaption></figcaption></figure> <figure><img src="/files/V7HqucKEWpTzJkJbC3Uz" alt=""><figcaption></figcaption></figure></div>

* **Create APIs and Services**

<div><figure><img src="/files/s9oiJS6KFzaTHnMIc41v" alt=""><figcaption></figcaption></figure> <figure><img src="/files/HgVFxQIcx5spthKHZDcD" alt=""><figcaption></figcaption></figure> <figure><img src="/files/vddD4nEgZPpbabha4Xr1" alt=""><figcaption></figcaption></figure> <figure><img src="/files/FR0aaAlmd3KzAQxOfXCr" alt=""><figcaption></figcaption></figure> <figure><img src="/files/q5fpUXC4vAPjKW3Uz84e" alt=""><figcaption></figcaption></figure> <figure><img src="/files/RD17xKXAW5DyIaClfduA" alt=""><figcaption></figcaption></figure> <figure><img src="/files/PYVooLbZuwKDOnpfz9aQ" alt=""><figcaption></figcaption></figure> <figure><img src="/files/hnjy9wSsyxvUnOBsFqBB" alt=""><figcaption></figcaption></figure> <figure><img src="/files/NWNfA8kH62SixP4K4lau" alt=""><figcaption></figcaption></figure> <figure><img src="/files/LkKS94JQGtQiBZ5ALXSN" alt=""><figcaption></figcaption></figure> <figure><img src="/files/HqFyMtiQVhHILF5ALUez" alt=""><figcaption></figcaption></figure> <figure><img src="/files/FqGIzn7bUB2RWfUU3poU" alt=""><figcaption></figcaption></figure></div>

#### **Step 2: Restrict some services**

**Only Enable 6 services**

* Maps Javascript API
* Places API
* Places API new
* Geocoding API
* Geolocation API
* Directions API

<div><figure><img src="/files/EvYcvipTROhe85hotqs9" alt=""><figcaption></figcaption></figure> <figure><img src="/files/6DrWgC9A5gR812QhbGFd" alt=""><figcaption></figcaption></figure> <figure><img src="/files/jwHDugO5Xryy49rDCnP2" alt=""><figcaption></figcaption></figure></div>

* **Copy API Key and insert to "API Key" setting.**

<div><figure><img src="/files/3JRgowopUOqj8udyG8T6" alt=""><figcaption></figcaption></figure> <figure><img src="/files/j4IiEHinMt57UFlSfztr" alt=""><figcaption></figcaption></figure></div>

* **Use the map at frontend**

<div><figure><img src="/files/oyCwVRvOAE709m3k7UYb" alt=""><figcaption></figcaption></figure> <figure><img src="/files/sOdfneMKCfsUSdKUkl2W" alt=""><figcaption></figcaption></figure></div>

### 1.2) Setup Google Calendar service

**Step 1**: You have to create API Key like [step 1](#step-1-create-api-key)

**Step 2**: Enable the Google Calendar API

<div><figure><img src="/files/nn0A5vBzVBKoGLxvjskn" alt=""><figcaption></figcaption></figure> <figure><img src="/files/u9Hd56dRtw2lEGJ04cVq" alt=""><figcaption></figcaption></figure></div>

**Step 3**: Create Client ID

From Main Menu click OAuth consent screen

<div><figure><img src="/files/46PJ0HUgkcnJh84p32Xv" alt=""><figcaption></figcaption></figure> <figure><img src="/files/9T4dZ20Y7lmPiDsEaXAc" alt=""><figcaption></figcaption></figure> <figure><img src="/files/9CB6Fm1oaFWhWP7bUQxm" alt=""><figcaption></figcaption></figure> <figure><img src="/files/C01BNNW6jhwtJbvpEhLm" alt=""><figcaption></figcaption></figure> <figure><img src="/files/EMz6cXVAPgn2D0Hs0yIr" alt=""><figcaption></figcaption></figure> <figure><img src="/files/r0vef82XYGL4rd17iShH" alt=""><figcaption></figcaption></figure> <figure><img src="/files/GWGpkUXHhabQNXGY3wpn" alt=""><figcaption></figcaption></figure></div>

<div><figure><img src="/files/oKWepCV1qF1MG0MQnMYg" alt=""><figcaption></figcaption></figure> <figure><img src="/files/BDUlluTJAzHw2Qei1Cvr" alt=""><figcaption></figcaption></figure> <figure><img src="/files/lSHBu3nP4il1Bvxp1VMv" alt=""><figcaption></figcaption></figure> <figure><img src="/files/iZWD8zP5Qbir4orWDI2Y" alt=""><figcaption></figcaption></figure></div>

**Step 4**: Sync orders from your site to Google Calendar.

You need to sync the order to the Google Calendar linked to the email address registered with Google Calendar.

### 2: Open Street Map Settings

### a) Settings

Go to **WooCommerce > Settings > Booking & Rental > Google & Map > choose "OpenStreetMap" option.**

<figure><img src="/files/flUBtpKUYcrJjNTrIxpW" alt=""><figcaption></figcaption></figure>

* **Libs**: Pick features for your map system "suggest locations while typing" and Draw routes & calculate distance
* **Map Zoom**: Zoom of map at frontend
* **Latitude Map default**:  Default position of Map.
* **Longitude Map default**:  Default position of Map.

### b) Display in the frontend

<div><figure><img src="/files/vZ4MpF9bTrLkZZLWemVy" alt=""><figcaption></figcaption></figure> <figure><img src="/files/epjQEbAhcLJDLcXewNRk" alt=""><figcaption></figcaption></figure></div>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ovatheme.gitbook.io/brw/basics/global-settings/google-and-map.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.