There are times when you want to embed Google Maps in the messages that you are sending to the user.
Here is how you can do this -
- Go to Google Maps and search for the location. For instance, if you search for "White House", you will see that the search result looks like this.
2. Click on "Share" option in this search result and you will get a popup with two sharing options - "Share Link" and "Embed Map".
3. "Embed Map" is what we are interested in. So click on that option and you will see a dialog box which looks like this :
4. Copy the iframe code you see in there and paste it in any text editor. The code would look like this :
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3105.1503819264813!2d-77.03871848493745!3d38.89767627957064!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89b7b7bcdecbb1df%3A0x715969d86d0b76bf!2sThe+White+House!5e0!3m2!1sen!2sin!4v1511332214641" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
In this code, change the width to "250" and height to "200" so that it fits in well in the chat.
5. Copy this edited code and paste it in a message bubble. You will see this google map in your message bubble now. That's it.
And boom!!!! A map within a bot:
NOTE: You need to copy and paste this code directly in the Bot message bubble. If you type it out manually, it won't work.