How to create Google Maps by iframe codes 2 steps

Normally, you could create a lived Google maps by the WP Google Maps plugin, here is easier and quicker way to create a Google Maps by iframe codes. It no longer requires annoying API key settings like creating Google Maps

Get the iframe code of Google Maps

Please go to a 3rd website ( or google-map-generator) to general your Google maps, config the address, zoom, and other options, it will generate the HTML codes of the Google Maps. The width and height(on the iframe tag) should be set with 100%. Please only copy the HTML codes within <iframe ... > and </iframe>.

How to create Google Maps by iframe codes

It is possible to add the maps codes by an Embed or Text module in a Page or Portfolio.

Embed module

Please insert an Embed module in BM Content builder, select Other from the Source selector. Paste the Google maps codes into Embed Code box. The map should be set a Aspect Ratio 16:9, 4:3 or a custom ratio.

Text module

Please insert a Text module in BM Content builder, click Text tab on the right-top corner of the editor to turn to Text mode. Paste the iframe codes. Of course, you can paste the iframe code into WordPress default editor also.

Config the ratio in Text module

On the contact demo page of Arnold theme, you will notice that the ratio of the maps is the same as other 2 images.

It is defined by the special HTML codes(<p class="iframe-wrap" style="padding-top: 62.5%;">...</p>) out of the iframe codes:

<p class="iframe-wrap" style="padding-top: 62.5%;"><iframe src="!1m18!1m12!1m3!1d50759.32043136225!2d-122.06518650054932!3d37.33167558501774!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x808fb5b6c4951d0f%3A0xb651414deb31e9fb!2sApple+Infinite+Loop!5e0!3m2!1sen!2sus!4v1555551774287!5m2!1sen!2sus" width="600" height="450" frameborder="0" allowfullscreen="allowfullscreen"></iframe></p>

The padding-top determines the ratio of the map, the percentage 62.5% equal map height / width * 100%, on this demo, you could use the images width and height to get the padding-top value.

Was this article helpful?

Related Articles