How to remove box from new Google Maps embeds?

Question

Google appear to have changed how their iFrames work. There is now an infobox at the top left that tries to display the place name. The problem is that here in Ireland it\'s

Answer 1

Got two answers here, one that gets rid of the info box and one that might answer getting the correct place in the info box. Hope one of them helps.

---

Removing the info box

CAVEAT: The method here might be considered a "hack" and could change if Google change their underlying embed functionality.

I ended up here looking for a similar answer and, based on what others have said, I have come up with this. The answer is similar to others, but hopefully explains a few things about the embed url and how generate an embed url using the lat, long and zoom (something you might get from a location plugin in a CMS).

Using this post as a basis for searching, I found a couple of different post outlining a breakdown of the embed parameters, which are interesting reads in themselves:- Decoding the Google Maps embedded parameters, which led to here http://blog.themillhousegroup.com/2016/08/deep-diving-into-google-pb-embedded-map.html

What I pulled from those articles (I won't explain everything again here) was a breakdown of the "pb" parameter. "pb" is a propriety(?) format and "m" is a matrix reference. Shown here is an example of the embed code generated from a Google Maps embed share.

By playing around, I found the whole "pb" parameter can be simplified to

NOTE: The number after the "m" has decreased to indicate less items in the "matrix"

This embed above is for a location at lat = -37.7929167, long = 145.0157222 and zoom = 17

As intimated in another answer, it seems that if you use only the latitude and longitude (with this embed api, not the embed places api), the info box will not appear, but I needed to know how to get the embed url without going via google first to generate the url from a share.

In the "pb" break down, there are a couple of parts to note

• the map scale 1d2256.8774176856136
• the coordinate 2zLTM3Ljc5MjkxNjcgMTQ1LjAxNTcyMjI

The scale can be derived somewhat from an an algorithm I found here https://gis.stackexchange.com/questions/7430/what-ratio-scales-do-google-maps-zoom-levels-correspond-to and here https://www.esri.com/arcgis-blog/products/product/mapping/how-can-you-tell-what-map-scales-are-shown-for-online-maps/

but I found it wasn't quite right for the numbers I was expecting, so I fiddled the zoom level to give me

var mapScale = 591657550.5 / Math.pow( 2, zoom + 1);
// The results of this goes after the "1d" part in the map scale

For the coordinates, use base64 (example shown is for javascript) on the lat and long to get the resulting string. I have had it working using both decimal degrees and degrees minutes seconds formats.

var base64 = btoa([lat,long]); // lazy "lat,long" formatting
// the result of this goes after the "2z" part in the coordinate

If you want to script this, here is a simple example using javascript to generate the iframe, but you would probably want to create the whole src server-side. Please note: This isn't about a javascript solution, it's an example of a scripted solution.

    // create the iframe and with the required properties.
    var iframe = document.createElement("iframe");
    iframe.width = 450;
    iframe.height = 450;
    iframe.frameborder = 0;
    iframe.style.border = 0;
    iframe.setAttribute('allowFullScreen', '')
    document.body.appendChild(iframe)
    
    // sample lat and long.
    var lat = -37.7929167;
    var long = 145.0157222;
    var zoom = 17;
    
    // get the scale
    var mapScale = 591657550.500000 / Math.pow( 2, zoom+1);
    // get the base64 representation
    var base64 = btoa([lat,long]); // lazy "long,lat" formatting
    // set the source of the iframe
    iframe.src = 'https://www.google.com/maps/embed?key=asdfsdfsf&pb=!1m7!1m2!1m1!1d' + mapScale + '!3m3!1m2!1s0!2z' + base64;

I have created an example on codepen here showing the original embed, the minified embed, an embed without the scale, and the scripted solution. https://codepen.io/mcgern/pen/zLZJmQ

---

Correct place name in the info box

You may have already tried this, but if the business you want to put in has a Google place id, you might be able to find it using https://developers.google.com/places/place-id. Once you get the place id, you can use that in the place embed url like this

(I just found a random place that looks like it is the same building as Irish Coaches)