How to remove box from new Google Maps embeds?

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?

Answers


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.


It works when you use coordinates instead of the business name, as of 1/22/2018

  1. Go to Maps Ie to get your Coordinates
  2. Go to Google Maps and enter those coordinates (comma separated like this: 33.319663, -111.89780100000002)
  3. Click on Share (located on the left)
  4. Click on Embed Map
  5. Configure the size of map that you want
  6. 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>

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;

Upon further digging, what you are trying to do is to remove google map's placecard

There was similar question previously answered: Google Maps Embed - Remove Place Card


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>

simply enter destinations along the way such as stipulating a road to take and it will remove the alternates so you can still embed the iframe


Just delete a few characters from the embed code and here you go.

Normal embed:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3929.040079626225!2d76.32828391488012!3d10.013548175548115!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3b080cf735671585%3A0x515419464975212e!2sCoredes+-+UX+Studio!5e0!3m2!1sen!2sin!4v1536297325864" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

You just need to delete the characters that come between 1m2! and 1sen!

Edited code:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3929.040079626225!2d76.32828391488012!3d10.013548175548115!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1sen!2sin!4v1536297325864" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

I tried more than a dozen places in different countries and worked fine for me.


Not quite what you want, but if your solicitor's address is showing up on google maps, then why not just embed with a search to the address.

<iframe 
width="600" height="450" frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/search?q=1873 Bachelors Walk, Dublin,
Ireland
&key=AIzaSyDsQc1PNQhYYVbGn9R4_vWY3SOlEKOM7JU">
</iframe>

http://jsfiddle.net/zE8tE/2/


My simple solution: Using Firefox with both "AdblockPlus" and "AdblockPlus Element Hiding Helper" addins it is VERY EASY to identify the box and delete it. It will never return until Google renames the hidden element (or you remove the element hiding rule you created). This method also works for removing almost any element from any of our favorite websites - I use it heavily to remove all kinds of crud from many pages that I frequent. It takes some practice to get the feel for using this technique - but it works beautifully. And, the combination of Ghostery and Adblock Plus is a gift from heaven.


Need Your Help

SQL Delete Rows Based on Another Table

sql mysql

This is probably very easy, but it's Monday morning. I have two tables: