Embedding Google Maps in Email

[michaelstancil]

Hi all,

I was curious if anyone has successfully embedded Google Maps within an email. I've read about the landing page embeds, but I assume the email would be similar. Is it as simple as connecting the embeddable files via a script token?

[SanfordWhiteman · Accepted solution]

There’s no need for a webhook (how would you store the binary response?). The Maps service is the src of your img tag.

[Jo_Pitts1]

@michaelstancil ,

try this: https://developers.google.com/maps/documentation/maps-static/start

I've not done it, but it is pretty straightforward.

Let me know if you need more help.

Cheers

Jo

[michaelstancil]

Hey @Jo_Pitts1,

My requests will come in lower, so I think the static is a viable option. I've gotten the webhook for the static service setup, as well as my Maps API. The only thing I'm missing is the response, or how best to send it?

Or am I over thinking this and a call like this goes within the html of the email?

https://maps.googleapis.com/maps/api/staticmap?center=Berkeley,CA&zoom=14&size=400x400&key=KEY

[Jo_Pitts1 · Accepted solution]

@michaelstancil ,

yeah - try just sticking that as the source in an image tag.

Cheers

Jo

[michaelstancil]

@Jo_Pitts1 @SanfordWhiteman Ah, yeah I figured it was something simple like that (I'm no engineer, but trying based on all of this haha)

Thanks y'all!

[michaelstancil]

@Jo_Pitts1 @SanfordWhiteman Follow-up question - My contacts have lat/lon, and I'm trying to update the map to include the lat/lon based on a token. I know the values paste appropriately, but I'm not sure if it's a load time issue or not, as I get a maps error.

My token is setup as follows:

https://maps.googleapis.com/maps/api/staticmap?center=${OpportunityList.get(0).Latitude},${OpportunityList.get(0).Longitude}&zoom=12&size=400x400&maptype=roadmap&key=KEY

And then I load the image as:

<img src="{{my.Gmaps}}" img="" alt="Alt Text" width="400" height="400" />

[SanfordWhiteman]

I would output the entire img tag from velocity (not just the src). Just outputting the attribute value isn’t supported (though it sometimes works depending on the tag).

But what do you mean by “paste appropriately“? What’s the resulting URL? Should be easy to see in your source.

[michaelstancil]

My bad, I know that they provide the proper lat/lon as the formatting is required.

The result of the image is blank, this is the response from the link: 

{"message":"Page Not Found"}

 

[SanfordWhiteman]

The URL though. That’s what matters — that’s what Google sees.

[michaelstancil]

This is the URL, how can I see what is sent off with the tokens formatted?

<img src="https://maps.googleapis.com/maps/api/staticmap?center=${OpportunityList.get(0).Latitude},${OpportunityList.get(0).Longitude}&zoom=12&size=400x400&maptype=roadmap&key=AIzaSyDeFh1fQADsDUAqoCty9jz-v5c6dTVlrmk" img="" alt="Alt Text" width="400" height="400" />

[SanfordWhiteman]

Look in the source of a received email? Or use Preview-by-List and inspect the image. Of course you can also output the URL on its own in the email to see it as pure text.

[michaelstancil]

So in looking at the source, it appears it's sending the named tokens, not the values. Is this because I'm not escaping the $?

<img src=3D"https://maps.googleapis.com/maps/api/staticmap?center=3D${OpportunityList.get(0).Latitude},${OpportunityList.get(0).Longitude}&zoom=3D12&size=3D400x400&maptype=3Droadmap&key=KEY" img=3D"" alt=3D"Alt Text" width=3D"400" height=3D"400"/>

[SanfordWhiteman]

I don’t see an encoding issue here. Why would you escape the dollar sign (since you’re trying to use its special meaning, the start of a Velocity reference)?

More like the person doesn’t have any Opportunities. Thus the values are null, and Velocity outputs the raw source code in this case.

[michaelstancil]

That's what's weird though, that person does have those values

[SanfordWhiteman]

Are you sending a real email (you must) or a sample?

Fields are checked off in the tree in Script Editor?

[michaelstancil]

Fields were checked off, everything was correct...

...except for the fact that there are two sets of lat/lon fields and when I double-checked the indicator field (what I put on top of all emails that outputs the value text), they were based off a different one...so that happened.

WE'RE GOOD NOW! Thanks so much again for your help!

[SanfordWhiteman · Accepted solution]

There’s no need for a webhook (how would you store the binary response?). The Maps service is the src of your img tag.

[Jo_Pitts1]

SNAP 🙂

[SanfordWhiteman]

I deliberately said “a service” and not Google’s service because of this part, though 🙂 —

Signed requests aren’t suitable for email on their own.

[Jo_Pitts1]

True enough. 

I suppose it depends on OP's volumes. 

That having been said, If one doesn't currently exist, it'd be trivial to create a service that held the signing details, took the balance of parameters in the URL, and requested the image from google, and returned the image to the original caller.

Cheers

Jo

[SanfordWhiteman]

Mail clients won’t run JS, period.

You can use a service that returns a map-like image based on query params in the URL.