How To Embed Google Map into Responsive Website

I recently purchased a responsive web template but wanted to include a Google Map of the website business being promoted. I wanted the Google Map to be responsive just like the site. Here’s how to do it in a few steps.

Go to Google Maps and search for the business and position the map the way you want it (see image above). To the left you will find a blue ‘share’ icon. Click on the icon to reveal the panel below. Notice I selected the ‘Embed map’ tab at the top. Again, position the business location as you wish it to appear on your site. It works best to center your business. You will need the iframe source code as it appears so keep your Google Map open.

Copy the iframe source code completely and paste it below where shown.

<style>
    .google-maps {
        position: relative;
        padding-bottom: 50%; // This is the aspect ratio
        height: 0;
        overflow: hidden;
    }
    .google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }
</style>

<div class="google-maps">
    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d7098.94326104394!2d78.0430654485247!3d27.172909818538997!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2s!4v1385710909804" width="600" height="450" frameborder="0" style="border:0"></iframe>
</div>

Next, copy the code above and insert it into your page where you wish the Google Map to appear.

One other adjustment is the upper blue line of code which I set at 50%. This is the aspect ratio. You can change this figure to your liking for example, if you wish to decrease the vertical dimension of the map, decrease the 50% to say, 40%. If you wish a wish to increase the map’s vertical dimension increase this to 75% or so. Tweak to your liking.

Source: Thanks to Amit Agarwal for the code.

Viola! That should do it. Check the map on a smartphone, tablet or desktop. It should work perfectly. Good luck!

Create Favicon for Your Website For Free!

Do You Need a Favicon?

The debate is still out whether or not a favicon helps your SEO. Some specialists think it may give you a small SEO boost while others disagree. It does help with your branding and may even build credibility and trust to your site. Apparently it does no harm so let’s create one.

Favicon.cc is a site that allows you to create a free favicon without even registering. Follow the easy instructions:
Create New Favicon> Import Image.
However, before you Import your image you need to create it. In this example I am creating a simple ’45’ for use on my site. I included a black border which was created in Fireworks since the background on Explorer is grey and it shows up better. However, the background on Chrome is black so it doesn’t show at all. You may wish to keep these background colours in mind when designing your favicon.

Create a Favicon

You can create your image in any editor such as Fireworks or Photoshop. Create a square image 200 x 200 pixels. Keep it simple because the final generated favicon for your site will only be 16 x 16 pixels. Save your image to Desktop. Now you’re ready to Import it to Favicon.cc. If the image created is square you can select ‘Keep Dimensions’. Click Upload. You can now edit your image within favicon.cc however if your image was fine in your editor it should not require any further editing. A Preview palette is below which shows what your new favicon will look like preceding a url. Once you’re pleased with the results click Download and save it. Give the file a short name like ‘favicon’. The favicon will be saved as a .ico file.

Install Favicon On Your Website

First, upload the tiny favicon.ico file to your website. In most cases you need to upload the .ico file to your website’s main directory (the public_html folder). It will now appear along your other html files. Don’t put the file in your images folder. Next, insert this code in every one of your html pages you wish to display the favicon:

Replace the favicon.ico file name if you saved your image as something other than ‘favicon’. Insert the code in every page between the Head tags. I put mine immediately underneath the title tags. If you have a dynamic header you may need to insert the code only into the index page. Save and Upload your pages and test. Clear your browser cache to see the new favicons. That’s it!