Removing the info window from an embedded map in the new Google Maps

Question

In years past, it was easy to remove the info window from an embedded Google Maps. Just add iwloc=near in the query string.

In the past few weeks, Google has migrated to a NEW embed query string format, to coincide with their new Maps product.

Does anybody know how to hide the info bubble with the new query string? I do want to keep the marker icon (obstructed by the info window). I tried including iwloc=near before the rest of the query string, but that did nothing. I don't see any option on the new Embedded Map builder, either.

<iframe 
src="https://www.google.com/maps/embed?iwloc=near&pb=!1m20!1m8!1m3!1d3246.3028987305834!2d-97.52973594999999!3d35.5462208!3m2!1i1024!2i768!4f13.1!4m9!1i0!3e6!4m0!4m5!1s0x87b21a2b843c4d5f%3A0xd6deac9724fb9935!2s7316+N+Western+Ave%2C+Oklahoma+City%2C+OK+73116!3m2!1d35.5462208!2d-97.5297267!5e0!3m2!1sen!2sus!4v1394217557679" 
width="420" 
height="200" 
frameborder="0" 
style="border:0">
</iframe>

Here is what is output. Note the info window, bordered in red, that I wish to remove.

Unsuccess

Answer 1

It looks like they've overhauled the way the embedded maps api works...

From the new docs, it looks like you can definitely remove the bubble by making request in "view mode" instead of "place mode". However this will result in no marker either.

It doesn't have much to say on what options are supported for place mode, but you might try updating your URL to the new place endpoint and then experimenting with some of the legacy options.

Update

I tested it myself using the new google.com/maps/embed/v1/place/... endpoint and it doesn't work if you add &iwloc to that. In fact, it will throw an error about the unsupported parameter.

Unfortunately, it appears that the new API only supports these parameters:

The following optional parameters can be used with any of the map modes listed above.

center defines the center of the map view. It accepts either a comma-separated latitude and longitude value (such as 37.4218,-122.0840) or a place name or address string (such as Champ+de+Mars,Paris,France).

zoom sets the initial zoom level of the map. Accepted values range from 0 (the whole world) to 21 (individual buildings). The upper limit can vary depending on the map data available at the selected location.

maptype can be either roadmap (the default) or satellite, and defines the type of map tiles to load.

language defines the language to use for UI elements and for the display of labels on map tiles. Note that this parameter is only supported for some country tiles; if the specific language requested is not supported for the tile set, then the default language for that tileset will be used. By default, visitors will see a map in their own language.

region defines the appropriate borders and labels to display, based on geo-political sensitivities. Accepts a region code specified as a two-character ccTLD (top-level domain) value.

Sorry to be the bearer of bad news.

Rubberneck

Accepting this... not what I was hoping for, but the best we've got for now. Thanks! – Unsuccess

I hear you. Not the answer I wanted either. Of course, I'm pretty sure the precise experience we want can be created manually via the API... But that's another kettle of fish... – Rubberneck

note that the center parameter doesn't actually work at the moment. See #23741585 – Simson

Answer 2

Try entering latitude & longitude coordinates instead of address. Was just now pleasantly surprised it generated the iframe code without address block overlay.

Kingship

Where abouts did you add these coordinates. I added and still get info pane. I added to maps.google.com/maps?q= – Telephony

@raison I just searched using them with the regular textbox in Google Maps. Then you can go to embed map option and copy the html code. I got my coordinates using: maps.ie/coordinates.html. Thanks FBT – Adrianeadrianna

Answer 3

<div style="
  height: 100px;
  overflow: hidden;
  position: relative;
  width: 100px;
  display: flex;
  justify-content: center;
  border-radius:15px;">
  <div style="
      position: absolute;
      bottom: 0;
      height: 100%;
      width: calc(100vw + 600px);">
<iframe class="border-card" src="your source" allowfullscreen="" loading="lazy">
</iframe>
</div>
</div>
                           

i did this and the option removed

Bailee

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Gustie