Story

I'm currently building my own software development agency site, my expertise is not in Frontend Development, but more into Backend, Infra and Data. I have limited experience with React, my experience in this space mostly in build tools like Webpack and frontend optimization, not the implementation per se. Now when I try to include a Google Maps Iframe, I found difficulty.

From Google Maps I get something like

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3966.521260322283!2d106.8195613507864!3d-6.194741395493371!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e69f5390917b759%3A0x6b45e67356080477!2sPT%20Kulkul%20Teknologi%20Internasional!5e0!3m2!1sen!2sid!4v1601138221085!5m2!1sen!2sid" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>

If I make it pretty it would looks like this

            <iframe
              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3966.521260322283!2d106.8195613507864!3d-6.194741395493371!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e69f5390917b759%3A0x6b45e67356080477!2sPT%20Kulkul%20Teknologi%20Internasional!5e0!3m2!1sen!2sid!4v1601138221085!5m2!1sen!2sid"
              width="600"
              height="450"
              frameBorder="0"
              style="border:0;"
              allowFullScreen=""
              aria-hidden="false"
              tabIndex="0"
            />

And it wouldn't work out of the box, turned out the issue is with the style.

It should be style={{ border: 0 }} not style="border:0;". Now the end result is looks like this

            <iframe
              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3966.521260322283!2d106.8195613507864!3d-6.194741395493371!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e69f5390917b759%3A0x6b45e67356080477!2sPT%20Kulkul%20Teknologi%20Internasional!5e0!3m2!1sen!2sid!4v1601138221085!5m2!1sen!2sid"
              width="600"
              height="450"
              frameBorder="0"
              style={{ border: 0 }}
              allowFullScreen=""
              aria-hidden="false"
              tabIndex="0"
            />

You can adjust the width and height as well as needed.

Voilà, it works

Thanks for reading my bite-sized tutorial.

About Me 😄

I'm Abdurrachman and currently, I'm managing a software development agency called Kulkul.tech. We're a web and mobile software development company providing excellent software for business. We're working with companies all over the world from a single-person business to large corporates. We are a solid remote-first firm with a high emphasis on people and clear communication.

We begin each project with understanding the client's business and problem then provide a contextual solution and applicable technology. We make sure that cooperation with us develops the business of our client.

We provide excellent engineers and designers to deliver a complete product from spec gathering, product road mapping, UI/UX design, development, QA, and DevOps.
We're experts in the following technologies:

• JavaScript and Node.js
• Python and Django
• Ruby on Rails,
• Mobile (iOS and Android) especially Flutter
• DB: MySQL, PostgreSQL, MongoDB,
• Frontend: Elm, React, Angular

We working in Codementor too, please reach me in Codementor if you're interested.