# Google Map

Advanced Views supports the Google map field types (e.g. [ACF Google map field](https://wplake.org/blog/acf-google-map-field/)), and allows to display the Map without additional JavaScript code.

To make use of the [Google Map field](https://www.advancedcustomfields.com/resources/google-map/) you’ll need to first define the **Google Map API** key in your theme.

**Copy** the code snippet below and paste it into your theme’s functions.php file, replacing the ‘YOUR\_KEY\_HERE’ with your API key. [Get Google Maps API key here](https://developers.google.com/maps/documentation/embed/get-api-key).

{% code overflow="wrap" %}

```php
// Google Map API key
add_filter('acf/fields/google_map/api', function ($apiSettings) {
    return array_merge($apiSettings, [
        'key' => 'YOUR_KEY_HERE',
    ]);
});
```

{% endcode %}

**Assign** the **Google Map** field to your *Layout* by selecting it from the **Field** list.

## Field Options (Pro)

**Switch** to the **Field Options** tab for more control of your map and its display.

**Map Marker Icon** - Customize the Map Marker by using your own icon or uploading an image from [Flaticon](https://www.flaticon.com/free-icons/google-maps) (.png, .jpg allowed). Dimensions of 32x32px is recommended.

{% hint style="danger" %}
Don't use an SVG icon for the marker icon, as there is no way to restrict the dimensions using CSS. Rather upload the correct size .png or .jpg image.
{% endhint %}

**Map Marker icon title** - Shown when mouse hovers on Map Marker.

**Hide Map** - The Google Map is shown by default. Turn on the switcher to hide the map.

**Show address from the map -** The address is hidden by default. Turn this on to show the address from the map.

**Map address format** - By Default the address format is street number, street name, city, state, post code and country. You can change the order or hide some parts by using the provided variables in your Custom Template. 

{% code overflow="wrap" %}

```php
$street_name$, $city$, $state$, $post_code$, $country$
```

{% endcode %}

## Step by step guide

See guide for using [ACF Image as Map Marker](/advanced-views/guides/map-marker-from-acf-image.md).

## See it in action

[Visit the Playground](https://playground.wordpress.net/?blueprint-url=https://wplake.org/playground/advanced_views_lite-latest-101.json) and Navigate to Display Meta fields > Advanced fields.

## Displaying multiple CPT items on a single map

This page focuses on embedding single maps on individual pages or Custom Post Type items. However, there are scenarios where displaying multiple CPT items on a single map is essential. For example, if you’re managing an "events" CPT, you might need to showcase all events on a single map to provide a comprehensive view of all locations.

The process leverages ACF to store item coordinates as post meta, allowing you to query these CPT items and render them as markers on a unified map.

For a step-by-step guide on this, refer to the "[CPT items map](https://wplake.org/blog/embed-maps-in-wordpress/#5-advanced-how-to-display-all-wordpress-cpt-items-on-a-single-map_juvs)" section in our blog article.

## FAQs

<details>

<summary>How do I change the map height?</summary>

Change the height of the Google Map, visit the field group in ACF and define the ‘Height’ in px. Alternatively, define the height using CSS by copying the snippet below into your *Layout's* CSS Code field in the CSS & JS tab.

{% code overflow="wrap" %}

```css
/* Define the height of the Google Map */
#views__map {
height:600px;
}
```

{% endcode %}

</details>


---

# 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://wplake.gitbook.io/advanced-views/display-content/meta-fields/advanced-fields/google-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.