Add picture behind Google maps map-CodePudding

I would like to add a picture beside this Google Maps map: https://imgur.com/xrpGgtO but I'm not sure how, here is my code:

      <section  id="contact-section">
        <div  >
          <div >
            <h4  data-aos="fade-down">¿Tiene alguna duda?</h4>
            <h4  data-aos="fade-down"> ឵឵ </h4>
          </div>
          <div data-aos="fade-up">
            <button  data-toggle="modal" data-target="#exampleModal">Contáctanos</a>
          </button>
          </div>          
        </div>
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3901.165195727537!2d-77.02086168507019!3d-12.100840946203745!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x9105c87176d57413:0x91785bfebf4bb5dc!2sAv. República de Panamá 3635, San Isidro 15036!5e0!3m2!1sen!2spe!4v1652844514162!5m2!1sen!2spe" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
      </section>

I want the picture right here: https://imgur.com/gLCqq2p Hopefully someone can help me out, thanks!

CodePudding user response：

put map div inside a wrapper and set that to display:flex set width of that as your linking.

.map-wrapper{
  display:flex;
}

<div >
  <div >
     <section  id="contact-section">
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3901.165195727537!2d-77.02086168507019!3d-12.100840946203745!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x9105c87176d57413:0x91785bfebf4bb5dc!2sAv. República de Panamá 3635, San Isidro 15036!5e0!3m2!1sen!2spe!4v1652844514162!5m2!1sen!2spe" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
      </section>
  </div>
<div >
  other stuff
</div>
</div>

CodePudding user response：

You can use flex box for this:

.flex-container {
  display: flex;
  flex-wrap: nowrap;
}

.flex-container > div {
  width: 50%;
  line-height: 75px;
}

     <section  id="contact-section">
        <div  >
          <div >
            <h4  data-aos="fade-down">¿Tiene alguna duda?</h4>
            <h4  data-aos="fade-down"> ឵឵ </h4>
          </div>
          <div data-aos="fade-up">
            <button  data-toggle="modal" data-target="#exampleModal">Contáctanos</a>
          </button>
          </div>          
        </div>
        <div >
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3901.165195727537!2d-77.02086168507019!3d-12.100840946203745!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x9105c87176d57413:0x91785bfebf4bb5dc!2sAv. República de Panamá 3635, San Isidro 15036!5e0!3m2!1sen!2spe!4v1652844514162!5m2!1sen!2spe" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
        <img src="https://i.imgur.com/gLCqq2p.png">
        </div>
      </section>

Make sure to change your image and the width of the image.