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 often impossible to use the name of the business to pinpoint a map, and often you need to use the street name etc etc, which makes the box functionaly useless as the name of the street is right there on the map, as well as on the page beside the map!

How can I get rid of this thing? In this example the business is in the same building as Irish Coaches. Maps insists that by putting in the address, this solicitor for some reason want's to inform its prospective clients of where Irish Coaches is!

I've tried iwloc but it does nothing, and I can't effect it via CSS and jQuery because it's on another domain!

Any ideas?

Answer 1

It works when you use coordinates instead of the business name

1. Go to Google Maps and enter the desired coordinates (comma separated like this: 33.319663, -111.89780100000002)
2. Click on Share (located on the left)
3. Click on Embed Map
4. Configure the size of map that you want
5. Copy the html

Resulting html is something like this:

<iframe
    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3333.967410377096!2d-111.89998968453055!3d33.31966746342457!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMzPCsDE5JzEwLjgiTiAxMTHCsDUzJzUyLjEiVw!5e0!3m2!1sen!2sus!4v1516690469899" 
    width="600"
    height="450"
    frameborder="0"
    style="border:0"
    allowfullscreen
></iframe>

Answer 2

This stopped working around February 2017. They must've updated their API. :(

PLEASE USE ZETA'S EXAMPLE FROM 1/22/2018

This is how you do it!

Working version

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2381.7399040776495!2d-6.261147484122739!3d53.34791197997939!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!3m2!1sen!2sus!4v1462581622087" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

I noticed a pattern in another site's embed that only had the "View larger map" text and none of the extra stuff. Just a few characters had to be removed.

Full embed you are given

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2381.7399040776495!2d-6.261147484122739!3d53.34791197997939!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48670e84fbdd6bd3%3A0x998692b4f1b691e1!2sUlster+Bank+Chambers%2C+O&#39;Connell+Street+Lower%2C+Dublin+1%2C+Ireland!5e0!3m2!1sen!2sus!4v1462581622087" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

This is the part that's removed

1m2!1s0x48670e84fbdd6bd3%3A0x998692b4f1b691e1!2sUlster+Bank+Chambers%2C+O'Connell+Street+Lower%2C+Dublin+1%2C+Ireland!5e0!

I've tried it for other addresses as well.

Answer 3

Update_2020:

1.find your location in google map

2.right click on your target and select What's here?

3.down the screen you can see a coordinate like this: 29.586525, 52.546173

4.now paste the coordinate into the search box

5.click on share button and choose Embed a map and copy the iframe tag

Answer 4

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.

<iframe src="https://www.google.com/maps/embed?pb=
    !1m18
        !1m12
            !1m3
                !1d2256.8774176856136
                !2d145.01353351606252
                !3d-37.79291244062522
            !2m3
                !1f0
                !2f0
                !3f0
            !3m2
                !1i1024
                !2i768
                !4f13.1
        !3m3
            !1m2
                !1s0x0%3A0x0
                !2zLTM3Ljc5MjkxNjcgMTQ1LjAxNTcyMjI
    !5e0
    !3m2
        !1sen
        !2suk
    !4v1532346966021
" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

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

<iframe src="https://www.google.com/maps/embed?pb=
    !1m7
        !1m2
            !1m1
                !1d2256.8774176856136
        !3m3
            !1m2
                !1s0
                !2zLTM3Ljc5MjkxNjcgMTQ1LjAxNTcyMjI
" width="450" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

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

<iframe width="600" height="450" frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJ02vd- 
4QOZ0gR4ZG28bSShpk&key=<INSERT_API_KEY>" allowfullscreen></iframe>

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

Answer 5

mid 2017,, you can use built in Google api control flag disableDefaultUI

use it like this:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -33, lng: 151},
    disableDefaultUI: true
  });
}

ref: https://developers.google.com/maps/documentation/javascript/controls#DisablingDefaults

<iframe src="https://google-developers.appspot.com/maps/documentation/javascript/examples/full/control-disableUI" width="100%" height="300" frameborder="0"></iframe>