37

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!

enter image description here

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?

duncan
  • 31,401
  • 13
  • 78
  • 99
Ferdia O'Brien
  • 867
  • 3
  • 10
  • 25
  • 1
    It might be useful to know that if the container height is lesser than 300px, a minimal version of the card will be displayed instead of the full card. – Gajus Jul 19 '17 at 12:46
  • The above comment (about the conatiner height) was extremely useful for me - thank you! – TheNovelFactory Nov 06 '20 at 12:44
  • Related: https://stackoverflow.com/questions/2105532/hiding-the-info-window-of-a-business-result-in-an-iframe-embedded-google-map – Jesse Nickles Dec 30 '22 at 20:51

5 Answers5

30

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>

Size configuration screen

miken32
  • 42,008
  • 16
  • 111
  • 154
zeta
  • 1,517
  • 1
  • 20
  • 14
  • 7
    This should be the accepted answer. The other answer that required removing '1m2!---!5e0!' from the URL removes the business information in the top left, but it also removes the map pin! (which you probably don't want.) – Joe Jul 23 '18 at 15:04
  • This should be the accepted answer. Works great since Google updated their API. – JKM Sep 24 '18 at 01:36
  • Much cleaner and simpler example - for anyone struggling with this. Remember to always try to use the simplest and easiest solution. This is by far the easiest way to achieve what you want. – James Nov 16 '18 at 12:34
  • This is the simplest way once you get your coordinates. – Tasawar Hussain Dec 30 '19 at 13:58
  • This allowed me to keep the map pin while removing the top-left information box. However, there is no address beside the pin anymore, but that's fine with me. February 2020. – Alex Banman Feb 04 '20 at 16:07
  • I get the regular info window right now. – Jorrit Schippers Apr 18 '23 at 11:05
26

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&#39;Connell+Street+Lower%2C+Dublin+1%2C+Ireland!5e0!

I've tried it for other addresses as well.

rawnewdlz
  • 1,221
  • 1
  • 17
  • 24
  • Wow, this worked for me. Takes a bit of trying, though. – Tintin81 Jan 02 '17 at 09:22
  • Tell me about it! When I first figured it out, I tested it on other addresses as well and was still in disbelief. :) – rawnewdlz Jan 03 '17 at 21:33
  • 4
    This worked for me too... I just look for the string starting with `1m2!` and ending with `!5e0!` and erased that... yeah! – god_is_love Jan 12 '17 at 01:24
  • 8
    This trick is great, but it will also remove the map marker along with the info window. – KoldBane Jan 25 '17 at 14:20
  • @KoldBane that's odd, it's not supposed to. It didn't remove it when I used it. – rawnewdlz Feb 06 '17 at 16:03
  • @rawnewdlz it definitely removes it now. Here's a CodePen with your example code pasted in: http://codepen.io/JoshuaVB/pen/vgaGVo. The box is missing, as well as the pin. This behavior is confirmed on Chrome, FF, and IE. Could you confirm? – KoldBane Feb 06 '17 at 16:57
  • @KoldBane can you please include the full embed in a comment within that codepen? Thanks – rawnewdlz Feb 06 '17 at 16:59
  • @rawnewdlz I've added in the full embed now with a comment. Only issue is that the full embed doesn't seem to be rendering properly. The ' in the URL is breaking the embed when the commenting is taken off. Difficult to proof that way. We could try it with another URL, it wouldn't take long. The reason I'm so interested in this hack is that it would allow me to customize my embeds without having to integrate the JavaScript API. Very useful and time-saving if we can get it to work as expected. – KoldBane Feb 06 '17 at 17:06
  • 1
    @KoldBane You're right, they must've updated the API. It doesn't work anymore. Only way I can think of removing the description box is by using JS to embed CSS in the iFrame. Sorry :( – rawnewdlz Feb 06 '17 at 19:46
  • @rawnewdlz At least we know now. It isn't rocket science integrating the JS API, but it's a pain when you're creating lots of mini-sites like I do. Thanks for investigating with me! – KoldBane Feb 06 '17 at 21:44
9

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)

Jarrod McGuire
  • 523
  • 5
  • 11
  • 1
    Thanks a lot for your handy script. I can confirm that it still works as of 30/7/2019. In my case I had to use an iframe instead of the JavaScript API, and this is the only working solution. – Skovsgaard Jul 29 '19 at 23:19
4

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

sina
  • 2,103
  • 1
  • 19
  • 26
1

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>
Kresimir Pendic
  • 3,597
  • 1
  • 21
  • 28