Search code examples
facebook-messengergoogle-maps-static-api

Google Static maps won't show in facebook messenger


Sending this to facebook won't display the map as it used to

{
                    "attachment":
                    {
                        "type":"template",
                        "payload":
                        {
                            "template_type":"generic",
                            "elements":
                            [
                                {
                                    "title":"Is this your address?",
                                    "image_url":"https://maps.googleapis.com/maps/api/staticmap?size=400x400&markers=color:blue%7Clabel:S%7C"+address+"&key=API_KEY",
                                    "subtitle":address,
                                    "buttons":
                                    [
                                        {
                                            "type":"postback",
                                            "title":"Yes",
                                            "payload":address
                                        },
                                        {
                                            "type":"postback",
                                            "title":"No",
                                            "payload":"googlemapwrong"
                                        }              
                                    ]
                                }
                            ]
                        }
                    }

Sending other image_url still works but maps aren't displayed.


Solution

  • Like @Abhishek Raj said, Fb is making some kind of double encoding on the url, and then the url doesn't make sense. I have tried to encode the address for url first, but then the address stayed decoded and google didn't recognized it. the only workaround that I have found is to remove special characters (e.g #,@) from the address if there are any, and replace all the spaces with dashes(google map doesn't mind if you do..)

    address = address.Replace(' ','-')
    

    and then use the address in the url

    "image_url":"https://maps.googleapis.com/maps/api/staticmap?size=400x400&markers=color:blue%7Clabel:S%7C"+address+"&key=API_KEY"
    

    This is working for me on messenger v2.2