How to generate Google Embed Links Programmatically for iframes— For Routes Only

4 min readOct 5, 2020

I was looking for a way to generate Google Embed Links for a project of mine. I had a bunch of locations in coordinates that I somehow had to make it to an embeddable Uri.

The issue that I ran in to was the syntax that google used.

Let’s take the simple 6 point route here below

when you check the URI on the browser it looks like follows

https://www.google.com/maps/dir/-37.9179233,145.1432887/-37.9237736,145.200811/-37.9383218,145.1964051/-37.9670218,145.1902103/-38.0097144,145.1049603/-37.9183966,145.1436804/@-37.9649338,145.0847525,12z/data=!3m1!4b1

If you take the part of the URL that is up to /@ this still gets the job done as a Uri.

You can paste that bit in the browser Uri and it generates the rest

https://www.google.com/maps/dir/-37.9179233,145.1432887/-37.9237736,145.200811/-37.9383218,145.1964051/-37.9670218,145.1902103/-38.0097144,145.1049603/-37.9183966,145.1436804

The issue is that you cannot embed this is an iframe as this is a will give you a CORS error

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <iframe   src="https://www.google.com/maps/dir/-37.9179233,145.1432887/-37.9237736,145.200811/-37.9383218,145.1964051/-37.9670218,145.1902103/-38.0097144,145.1049603/-37.9183966,145.1436804/@-37.9649338,145.0847525,12z/data=!3m1!4b1" width="800px" height="800px">
        </iframe>
    </body>
</html>

Yes you can use the Directions API along with Google Maps Embed API. But this will cost if the site gets used heavily. (Don’t want this)

But wait a minute, Google maps supports the Embeds. 😀.

The generated Embed code looks like follows

<iframe
src="https://www.google.com/maps/embed?pb=!1m38!1m12!1m3!1d25167.387113626373!2d145.11479126965395!3-37.95557476415162!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m23!3e0!4m5!1s0x6ad66b249c9ca71b%3A0xd53f2fd287706635!2s1366%20Centre%20Rd%2C%20Clayton%20South%20VIC%203169!3m2!1d-37.9299444!2d145.1213659!4m3!3m2!1d-37.9328299!2d145.15338219999998!4m3!3m2!1d-37.942884299999996!2d145.1517843!4m3!3m2!1d-37.940582899999995!2d145.1177095!4m3!3m2!1d-37.9299548!2d145.1213144!5e0!3m2!1sen!2sau!4v1601888211346!5m2!1sen!2sau" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0">
</iframe>

Now some bits we can identify easily to be our coordinates and some are kind of gibberish.

So How do I generate a Embed URI when I have a set of coordinates

Investigation Time

So the bit we are interested is as the src which is as follows.

https://www.google.com/maps/embed?pb=!1m38!1m12!1m3!1d25167.387113626373!2d145.11479126965395!3-37.95557476415162!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!4m23!3e0!4m5!1s0x6ad66b249c9ca71b%3A0xd53f2fd287706635!2s1366%20Centre%20Rd%2C%20Clayton%20South%20VIC%203169!3m2!1d-37.9299444!2d145.1213659!4m3!3m2!1d-37.9328299!2d145.15338219999998!4m3!3m2!1d-37.942884299999996!2d145.1517843!4m3!3m2!1d-37.940582899999995!2d145.1177095!4m3!3m2!1d-37.9299548!2d145.1213144!5e0!3m2!1sen!2sau!4v1601888211346!5m2!1sen!2sau

You can find a fair bit of research done on this here. But it did not solve my problem of being able to generate the Uri my self given a set of coordinates.

https://stackoverflow.com/questions/47017387/decoding-the-google-maps-embedded-parameters

Anything after the embed? were following the pb parameter schema.

So what does each part do. Lets break it down.

Let’s Explain the bits that are interesting here.

There are fair bit of segments that never change — This is good 😀

Param_4

This is the time of generation in epoch with a millisecond portion appended to the back.

in javascript it is

const epochNow = '${Date.now()}000';

Param_3

in here !4m is constant and the 25 is calculated

25 = 6 (Number of Route points we have) * 4 + 1 (which is the routing type parameter marked just below !4m25 as !3e6 [e — enum] 0 and 6 seems to be representing Driving)

Param_2

This is a weird one that I did not manage to make sense so what I did was I did the following assignments. Both worked.

Approach 1 — Assign 1.0 to all params

Approach 2— Assign 1.0 to !1d and !2d and !3d carry the first coordinate values

Param_1

in here !1m is constant and the 40 is calculated

40 = value of Param_3 + 15 (yes that easy)

So a sample Javascript code that generates the Embed URL will be as foll

let coordinateString = '';for (const item of coords) {
    coordinateString += '!4m3!3m2!1d' + item.lat + '!2d' + item.lon;
}const epochNow = Date.now();let urlConstruct = `https://www.google.com/maps/embed?pb=!1m${coords.length * 4 + 16}`;urlConstruct += `!1m12!1m3!1d1.0!2d${coords[0].$.lon}!3d${coords[0].$.lon}`;urlConstruct += `!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1`;urlConstruct += `!4m${coords.length * 4 + 1}!3e0${coordinateString}`;urlConstruct += `!5e0!3m2!1sen!2sau!4v${epochNow}000!5m2!1sen!2sau`;