Google maps

Bootstrap 5 Google maps component

Responsive Google maps built with Bootstrap 5. Google Map display a map of an area defined by a user. Maps can be used in components like forms and modals.

Basic example

In a few steps you can add a google map to your project:

  1. In your browser, go to Google Maps and enter the address you want to be visible on the map
  2. Click the "Share" button
  3. A new window will pop up. Click on the "Embed a map" tab and copy the provided HTML
  4. Paste the copied HTML
Edit in sandbox 
        
            
      <div>
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d18906.129712753736!2d6.722624160288201!3d60.12672284414915!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x463e997b1b6fc09d%3A0x6ee05405ec78a692!2sJ%C4%99zyk%20trola!5e0!3m2!1spl!2spl!4v1672239918130!5m2!1spl!2spl" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
      </div>

Adjust the iframe

Bootstrap provides us with classes with which we can adjust the aspect ratio of the iframe. To use them, we need to put our iframe into a wrapper with a ratio class and a second class that defines our ratio. For example, if we want our iframe to have an aspect ratio like youtube video thumbnails, we can use the ratio-16x9 class but remember to make this work, we had to remove the iframe's hardcoded height, width, and inline CSS.

Edit in sandbox 
        
            
      <div class="ratio ratio-16x9">
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d96714.68291250926!2d-74.05953969406828!3d40.75468158321536!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c2588f046ee661%3A0xa0b3281fcecc08c!2sManhattan%2C%20Nowy%20Jork%2C%20Stany%20Zjednoczone!5e0!3m2!1spl!2spl!4v1672242259543!5m2!1spl!2spl"  allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
      </div>

Satelite map

If you want a satellite view just set it on google maps before step 2 and it will show a satellite view automatically.

Edit in sandbox 
        
            
      <div class="ratio ratio-16x9">
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d117996.95037632967!2d-74.05953969406828!3d40.75468158321536!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c2588f046ee661%3A0xa0b3281fcecc08c!2sManhattan%2C%20Nowy%20Jork%2C%20Stany%20Zjednoczone!5e1!3m2!1spl!2spl!4v1672242444695!5m2!1spl!2spl" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
      </div>

Map within card

Add <div> with the map to your card and set its width. In the example below, I used the .w-50 class.

Card title
Edit in sandbox 
        
            
      <div class="card w-50 p-3">
        <div class="card-body">
          <h5 class="card-title">Card title</h5>
        </div>
        <div class="ratio ratio-1x1">
          <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d356933.8714888409!2d10.413661869378636!3d45.65994086120074!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4781eca8aec020b9%3A0x91dcf07c1c969bb8!2sGarda!5e0!3m2!1spl!2spl!4v1672244147501!5m2!1spl!2spl" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
        </div>
      </div>