0 Items
085 8018466 [email protected]

Inserting Google Maps for Free

News and Views

Google Maps for Free

If the map on the contact page of your website is not working, and had been previously been, most likely you have fallen foul of Google’s new pricing structure for their maps API. Previously there was a free tier which was more than enough for most SME’s website.

Now Google’s new charge for using their API for maps, makes it unrealistic for small business to sign up for if they just want to have a map on their contact page. Also who wants to leave credit card details on file with Google for a charge most business owners will not have the time or skills to monitor.

Don’t worry here is a quick tutorial on how to add a Google map for free, that is responsive. To get the best results, hopefully you have registered your business with Google as that’s the search we will use to begin.

  1. Go to the Google maps homepage ( do not sign in)
  2. Search for your business, or your business address if you have not registered, press enter.
  3. Now click the share link.
  4. Click the embed link.
  5. Copy the iframe code
  6. Open a text editor and add a div with a class of “map-responsive” around the code as the example below.

Snippet 1

<div class="map-responsive">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2441.4663378394425!2d-7.096267584949362!3d52.271235262388615!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4842c699d905e6bf%3A0x4a15f57730f2e7a3!2sthe+River+Consultancy!5e0!3m2!1sen!2sie!4v1531224391199" width="600" height="450" frameborder="0" style="border:0" allowfullscreen>
</iframe>
</div>

*Make sure you insert your iframe code.*

Copy and paste this into your webpage, if using wordpress, do via the “text” tab.

Snippet 2

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

We have set the map in this example to 90% you can change to suit your website.

Original code from OSTraining

If you prefer not to try this, you can download this plugin Leaflet Maps Marker it does require some basic set up, however it is a free option and can be added to any page via shortcode.