How to create Google Maps by iframe codes

Normally, you could create a lived Google maps by the WP Google Maps plugin, here is easier and quicker way.

Please go to a 3rd website (maps.ie or google-map-generator) to general your Google map, 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>.

Please add a Text module in a Page or Portfolio. Paste the iframe codes into the code mode of the Text module.

How to config the ratio?

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="https://www.google.com/maps/embed?pb=!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