Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google Maps Embed - Remove Place Card

Tags:

I'm using the new Google maps embed code (iFrame) to add a small map to my website, but I can't hide the new address box in the top left corner (see image below).

http://i.imgur.com/JOVXkra.jpg

I have generated the map code by clicking the "Share and embed map" option (see image below), but I'm wondering if I need to use the full API to achieve this.

http://i.imgur.com/xxl25Ga.png

All of the resources I've found so far just discuss the old embedding version and disabling the information balloon which is not the same, and the only clue I've got is that the HTML class of the box is called "place-card" but searching is still bringing me nothing.

Any help or point in the right direction would be much appreciated.

like image 375
Sintyche Avatar asked Dec 19 '13 17:12

Sintyche


People also ask

How do I get rid of the boxes in the new Google Maps embeds?

Just delete a few characters from the embed code and here you go. You just need to delete the characters that come between 1m2! and 1sen! I tried more than a dozen places in different countries and worked fine for me.

What does it mean to embed a map in Google Maps?

Google Maps has a "Share or embed map" feature that provides users with the map's HTML code so that they can insert it into their website's code. You can embed a map view image, a street view image, or even specific directions for a route.


1 Answers

You can hide all buttons with css. Create a container div width overflow on hidden and the sizes you need. Place the new google maps iframe/embed inside with a largersize. To position the maps iframe use negative marges..

Example with 100% width:

<div style="width: 100%; overflow: hidden; height: 300px;">   <iframe       src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d39797.07748547086!2d5.46683904751879!3d51.433965676849986!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47c6d90575ca5e3d%3A0x55989f5f344b006!2sPrins+Hendrikstraat+5!5e0!3m2!1snl!2snl!4v1392716144537"      width="100%"      height="600"      frameborder="0"      style="border:0; margin-top: -150px;">   </iframe> </div> 

Make the iframe 300px higher than your container div. 150px to hide below and 150px to hide on top. To hide this 150 on the top of the iframe use:

margin-top: -150px;

like image 120
Bo Pennings Avatar answered Sep 16 '22 22:09

Bo Pennings