CODEWITHSUNDEEP
javascripthtmlcssgoogle-maps
Marry Jane
Marry Jane

Reputation: 71

How to remove Location Box of Google Maps (top left)?

I'm trying to list out all of the warehouse locations from Google Maps on my website by using Google Map's iframe:

<iframe src="http://maps.google.com/maps?q=118+Lamington+Rd.+–+Bateman+Student+Center,+Branchburg,+NJ+08876&amp;output=embed" frameborder="0" style="border:0" allowfullscreen=""></iframe>

Currently, I'm stuck on how to remove the location box (top left) since I'm using this as an iframe. Is there a possible way that I can remove this part of the location box from iframe?

<div style="position: absolute; left: 0px; top: 0px;">
    <div style="background-color: white; margin: 10px; padding: 1px; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px; border-radius: 2px;">
        <div jstcache="0" style="">
            <div jstcache="117" class="place-card place-card-large">
                <div class="place-desc-large">
                    <div jstcache="36" class="place-name" jsan="7.place-name">Raritan Valley Community College</div>
                    <div jstcache="37" class="address" jsan="7.address">118 Lamington Rd, Branchburg, NJ 08876</div>
                </div>
                <div jstcache="38" class="navigate">
                    <div jsaction="placeCard.directions" class="navigate">
                        <a target="_blank" jstcache="52" href="https://maps.google.com/maps?ll=40.609526,-74.688894&amp;z=16&amp;t=m&amp;hl=en-US&amp;gl=US&amp;mapclient=embed&amp;daddr=Raritan%20Valley%20Community%20College%20118%20Lamington%20Rd%20Branchburg%2C%20NJ%[email protected],-74.6888942" class="navigate-link">
                            <div class="icon navigate-icon"></div>
                            <div jstcache="53" class="navigate-text">Directions</div>
                        </a>
                    </div>
                    <div class="tooltip-anchor">
                        <div class="tooltip-tip-outer"></div>
                        <div class="tooltip-tip-inner"></div>
                        <div class="tooltip-content">
                            <div jstcache="54">Get directions to this location on Google Maps.</div>
                        </div>
                    </div>
                </div>
                <div jstcache="39" class="navigate-separator"> </div>
                <div jstcache="40" class="star-entity">
                    <div jsaction="placeCard.star" class="star-button">
                        <div class="star-entity-icon-large">
                            <div jstcache="67" class="icon can-star-large" jsan="7.icon,7.can-star-large"> </div>
                            <div jstcache="68" class="icon logged-out-star" style="display:none"> </div>
                        </div>
                        <div jstcache="69" class="star-entity-text hidden" jsan="7.star-entity-text,7.hidden,t-PmAZCbgKmDw">Saved</div>
                        <div jstcache="70" class="star-entity-text" jsan="7.star-entity-text,t-bbrD6GAQ-ds">Save</div>
                    </div>
                    <div jstcache="71" class="tooltip-anchor">
                        <div class="tooltip-tip-outer"></div>
                        <div class="tooltip-tip-inner"></div>
                        <div class="tooltip-content">
                            <div jstcache="72">Save this place onto your Google map.</div>
                        </div>
                    </div>
                </div>
                <div jstcache="41" class="review-box">
                    <div jstcache="42" class="review-number" jsan="7.review-number">4.0</div>
                    <div jstcache="43" jsinstance="0" class="icon rating-star rating-full-star" jsan="7.icon,7.rating-star,7.rating-full-star"></div>
                    <div jstcache="43" jsinstance="1" class="icon rating-star rating-full-star" jsan="7.icon,7.rating-star,7.rating-full-star"></div>
                    <div jstcache="43" jsinstance="2" class="icon rating-star rating-full-star" jsan="7.icon,7.rating-star,7.rating-full-star"></div>
                    <div jstcache="43" jsinstance="3" class="icon rating-star rating-full-star" jsan="7.icon,7.rating-star,7.rating-full-star"></div>
                    <div jstcache="43" jsinstance="*4" class="icon rating-star rating-empty-star" jsan="7.icon,7.rating-star,7.rating-empty-star"></div> <a target="_blank" jstcache="44" href="http://www.google.com/search?q=Raritan+Valley+Community+College,+118+Lamington+Rd,+Branchburg,+NJ+08876&amp;ludocid=1578495031502184362#lrd=0x89c3937dc5acab1f:0x15e7f0de30681faa,1" jsaction="mouseup:placeCard.reviews" class="review-box-link" jsan="7.review-box-link,8.href,0.target,22.jsaction">69 reviews</a> </div>
                <div jstcache="45" class="saved-from-source-link" style="display:none"></div>
                <div class="bottom-actions">
                    <div class="google-maps-link"> <a target="_blank" jstcache="46" href="https://maps.google.com/maps?ll=40.609526,-74.688894&amp;z=16&amp;t=m&amp;hl=en-US&amp;gl=US&amp;mapclient=embed&amp;cid=1578495031502184362" jsaction="mouseup:placeCard.largerMap">View larger map</a> </div>
                </div>
            </div>
        </div>
    </div>
</div>

I tried using css but it does not work:

div[style*="position: absolute; left: 0px; top: 0px;"] {
    display: none;
}

I have also tried adding iwloc=near or iwloc=A on the URL, but it doesn't work still.

Upvotes: 1

Views: 2712

Answers (1)

Shawn Domingo
Shawn Domingo

Reputation: 1411

The ability to remove the location card in the Maps Embed API is currently not available, however, you may file a Feature Request in the Issue Tracker in order for the engineers to review the feasibility of the request. You may also try the workaround offered in this issue. Hope this helps

Upvotes: 1

Related Questions