How to create Responsive Google Map on any Website

It has been so long since I have written an article about How to Add WooCommerce Cart Icon With Cart Count To Your Theme and I have received many emails to write few more articles for the same subject but due to shortage of time I could not make it but the one question I have asked too frequently is creating responsive google map so the wait is over and let’s get started how to create Responsive Google Map on any website and any platform likewise WordPress, Joomla and any other HTML website.

In this tutorial, I will be showing you HTML and CSS and little instructions on how to get iframe from Google Map.

1# Get the Google Code Embade Code

• Go to Google Maps.
• Find the map area you want to use on your website.
• Click on the “Share” link.

• Choose “Embed map”.
• Select the iframe code.
• Right click and copy the embed code.

#2. Use the Embed Code

Paste the embed code in your website. It will look similar to this:

#3.Modify the Embed Code

Add a div tag around the embed code. Use the CSS class responsive-map so that your code now looks like this:

#4. Add the CSS

Now add some CSS properties inside one of your stylesheet files:

Your maps now will be responsive. Try resizing your browser to see it in action.

See the Pen Responsive Google Map with CSS by Shaz3e (@Shaz3e) on CodePen.