cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

Code-based Actions: Use Dynamic Google Maps Images

Code-based Actions: Use Dynamic Google Maps Images

Create dynamic Google Maps images for your chatbot responses

If your chatbot sends multiple addresses to your users, for example when you have multiple store locations, you might want to add a Google Maps image that dynamically changes depending on the address.

To set this up, you need 2 things:

  1. The address
  2. A Google Maps Platform API Keys

The address can be from your database, or it can be an address that the user just sent:

 

dynamic_image_url.png

 

The Image Reply contains the following URL:

https://maps.googleapis.com/maps/api/staticmap?center={{address}}&markers=color:red%7Clabel%{{addres...

Make sure not to forget to insert your API key at the end of the URL.

Notice that using this API will cost 0.002 USD each time.

As you can see, the image URL contains the parameter between double curly brackets. This makes the URL dynamic.

The value of the Address parameter will be used in Google Maps to do a location search.

You can then use the URL in image replies, cards and carousels just like any other image URL.

 

dynamic_image_reply3.png

 

Map Pins

You can remove the map pin if you don’t want it. Simply remove “&markers=color:red%7Clabel%{{address}}” from the URL.

You can also change the address parameter for something else to add the pin to a different location.

It’s also possible to change the color of the pin or even add more pins to the image.

Zoom and size

By giving another value to “&zoom=12”, you have the option to change the zoom of the image.

Changing the size of the image is possible by changing the value for the “&size=600x400” part of the URL.

Code-based Actions: Use Dynamic Google Maps Images

Create dynamic Google Maps images for your chatbot responses

If your chatbot sends multiple addresses to your users, for example when you have multiple store locations, you might want to add a Google Maps image that dynamically changes depending on the address.

To set this up, you need 2 things:

  1. The address
  2. A Google Maps Platform API Keys

The address can be from your database, or it can be an address that the user just sent:

 

dynamic_image_url.png

 

The Image Reply contains the following URL:

https://maps.googleapis.com/maps/api/staticmap?center={{address}}&markers=color:red%7Clabel%{{addres...

Make sure not to forget to insert your API key at the end of the URL.

Notice that using this API will cost 0.002 USD each time.

As you can see, the image URL contains the parameter between double curly brackets. This makes the URL dynamic.

The value of the Address parameter will be used in Google Maps to do a location search.

You can then use the URL in image replies, cards and carousels just like any other image URL.

 

dynamic_image_reply3.png

 

Map Pins

You can remove the map pin if you don’t want it. Simply remove “&markers=color:red%7Clabel%{{address}}” from the URL.

You can also change the address parameter for something else to add the pin to a different location.

It’s also possible to change the color of the pin or even add more pins to the image.

Zoom and size

By giving another value to “&zoom=12”, you have the option to change the zoom of the image.

Changing the size of the image is possible by changing the value for the “&size=600x400” part of the URL.

Code-based Actions: Use Dynamic Google Maps Images

Create dynamic Google Maps images for your chatbot responses

If your chatbot sends multiple addresses to your users, for example when you have multiple store locations, you might want to add a Google Maps image that dynamically changes depending on the address.

To set this up, you need 2 things:

  1. The address
  2. A Google Maps Platform API Keys

The address can be from your database, or it can be an address that the user just sent:

 

dynamic_image_url.png

 

The Image Reply contains the following URL:

https://maps.googleapis.com/maps/api/staticmap?center={{address}}&markers=color:red%7Clabel%{{addres...

Make sure not to forget to insert your API key at the end of the URL.

Notice that using this API will cost 0.002 USD each time.

As you can see, the image URL contains the parameter between double curly brackets. This makes the URL dynamic.

The value of the Address parameter will be used in Google Maps to do a location search.

You can then use the URL in image replies, cards and carousels just like any other image URL.

 

dynamic_image_reply3.png

 

Map Pins

You can remove the map pin if you don’t want it. Simply remove “&markers=color:red%7Clabel%{{address}}” from the URL.

You can also change the address parameter for something else to add the pin to a different location.

It’s also possible to change the color of the pin or even add more pins to the image.

Zoom and size

By giving another value to “&zoom=12”, you have the option to change the zoom of the image.

Changing the size of the image is possible by changing the value for the “&size=600x400” part of the URL.

Version history
Last update:
‎06-19-2021 11:17 AM
Updated by:
Contributors