Responsive Google Maps without API key

Since June 11, 2018, Google Maps requires an API key to display a map on a website. The Google Maps service is still free for the majority of users, because Google gives each user free credits to use with their APIs. Only service providers which are based on Google Maps and have extremely high number of API requests need to pay for Google Maps. See pricing model here. Setting up an API key is relatively easy. So if you want to follow this route, this step by step tutorial on how to set up Google Maps widget with an API key can help.

If you do not want to go through the process of setting up an API key, but you still want to include a responsive Google Map on your website, this is what you can do:

Instead of using the Google Maps widget, embed the map with the Custom HTML widget.

1. Open Google Maps and get your embed code.

2. Paste the code into Custom HTML widget and wrap it into the map-responsive HTML class

<div class="map-responsive">
/* google maps embedded code */
</div>

The reason for the <div class="map-responsive"> wrapper is that embedded google map isn't responsive by default. By adding the map-responsive class, you can force it to be responsive with some CSS.

Here is a final Map Example you can add to Custom HTML widget - just replace the iframe with yours:

<div class="map-responsive">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d12843273.87983452!2d-92.30333414602946!3d43.073810039047665!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew+York%2C+NY%2C+USA!5e0!3m2!1sen!2ssi!4v1563604338825!5m2!1sen!2ssi" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

3. To make the map responsive add this code to Theme Options -> Custom CSS:

.map-responsive{
    overflow:hidden;
    padding-bottom:30%;
    position:relative;
    height:0;
}
.map-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

This will force the map to adopt to all screen sizes. You can change the height of the map by adjusting the padding-bottom value.

If you need help setting up your Google Map, open a support ticket here: http://support.orionthemes.com