Member Avatar for brenzor

Im making a google map, and ive been looking at other sites maps and saw something I like here:

At the bottom of the map they have that darkened bar with the 'view larger map' action in it, how would I add this to my map? I looked at their code but I dont recognize how they did it.
I also dont know what its called so I cant even google a solution!
Anyone know?

  • 2 Contributors
  • 2 Replies
  • 125 Views
  • 11 Hours Discussion Span
  • Latest Post Latest Post by drjohn

Dani AI

Generated

is right that the dark bar is purely CSS; is also correct that the “View larger map” is just a link to Google Maps. Two practical ways to recreate that UI element are: 1) place a semi-opaque bar absolutely over the bottom of the iframe/map container, or 2) add a custom bottom control when you use the Google Maps JavaScript API. The overlay is quickest; the API-control approach is cleaner if you already have a JS map.

A minimal overlay pattern (works with an iframe or a JS map canvas):

<div id="map-container">
  <div id="map"></div>   <!-- or your iframe here -->
  <div class="map-bar">
    <a href="#" target="_blank" rel="noopener noreferrer" aria-label="Open full map in new window">View larger map</a>
  </div>
</div>
#map-container { position: relative; }
#map { width:100%; height:400px; display:block; }
.map-bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 8px 12px;
  background: linear-gradient(rgba(0,0,0,0.65), rgba(0,0,0,0.25));
  color: #fff;
  z-index: 20;
  pointer-events: none;    /* allow clicks through except the link */
}
.map-bar a { pointer-events: auto; color: #fff; text-decoration: none; }

If using the Maps JS API, push a small DOM element into map.controls[google.maps.ControlPosition.BOTTOM_CENTER] instead of overlaying an iframe — that keeps map interactions intact and positions relative to other controls.

Troubleshooting notes: use rgba() instead of opacity so text stays opaque; add rel="noopener noreferrer" for security on _blank links; on small screens reduce bar height or hide it with a media query so it does not cover important map markers.

Recommended Answers

All 2 Replies

Member Avatar for brenzor

I think ive realized that the dark bar is part of the css. but im still not sure how to add the "view larger map" part of it...

Member Avatar for drjohn

you could try looking at the code used...

<div class="map">
		<iframe marginheight="0" marginwidth="0" src="http://maps.google.co.za/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=4+chester+drive,+bishopscourt&amp;sll=-33.991125,18.442891&amp;sspn=0.010942,0.01929&amp;ie=UTF8&amp;hq=&amp;hnear=4+Chester+Dr,+Bishopscourt,+Western+Cape&amp;ll=-33.984648,18.447247&amp;spn=0.021707,0.085745&amp;z=14&amp;output=embed" scrolling="no" frameborder="0" height="425" width="1000"></iframe><br><small><a href="http://maps.google.co.za/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=4+chester+drive,+bishopscourt&amp;sll=-33.991125,18.442891&amp;sspn=0.010942,0.01929&amp;ie=UTF8&amp;hq=&amp;hnear=4+Chester+Dr,+Bishopscourt,+Western+Cape&amp;ll=-33.984648,18.447247&amp;spn=0.021707,0.085745&amp;z=16" style="color: rgb(0, 0, 255); text-align: left;">View Larger Map</a></small>
</div>

They show the larger map by simply linking directly to google maps

summarising the code

<div class="map">
<iframe src =link to show google map>

</iframe>
<br>
<small><a href=....>link direct to google maps</a></small>
</div>

Very easy, if you look at the code.

Edited by drjohn because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.