You can get the code of any Business/place which is listed on the Google Map. and then you can insert it into your website/blog too so that users can understand the exact address in a better way.
How to Embed an area in Google Map :
- Open Google Map
- Search the Business Place
- Select the exact business/place
- See in right bottom section there is a gear icon Click on that
- Now Click on share and embed map
- Now click on Embed map and copy the codes thats it.
The above code will be a shown like this :
<iframe src=”https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3503.3256130009395!2d77.08669500000002!3d28.590007000000007!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390d1b4247c48687%3A0xc65ac3fe8eb91f13!2sManglapuri!5e0!3m2!1sen!2s!4v1404496833842″ width=”600″ height=”450″ frameborder=”0″ style=”border:0″></iframe>
How ever the above code is too perfect to show the map in any website/blog. But if we are talking about its responsive ability, it lacks. In today’s world as every body wants to make his Website/Blog responsive, it is must to have a Google map trick which enables the above code to fit in a responsive website.You can also learn : How to create .htaccess file
Make Google Map Embeds responsive :
For this purpose we will use some lines of CSS coding and we will wrap the default google map embed code in it so that it supports in responsive web templates. It is easy to use and supports all website and blog types. Paste as I have put the code in the CSS as below –
<style>
.google-maps {
position: relative;
padding-bottom: 75%; // This the aspect ratio you can change
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=!1m18!1m12!1m3!1d3503.3256130009395!2d77.08669500000002!3d28.590007000000007!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390d1b4247c48687%3A0xc65ac3fe8eb91f13!2sManglapuri!5e0!3m2!1sen!2s!4v1404496833842″ width=”600″ height=”450″ frameborder=”0″ style=”border:0″></iframe>
</div>
.google-maps {
position: relative;
padding-bottom: 75%; // This the aspect ratio you can change
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=!1m18!1m12!1m3!1d3503.3256130009395!2d77.08669500000002!3d28.590007000000007!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x390d1b4247c48687%3A0xc65ac3fe8eb91f13!2sManglapuri!5e0!3m2!1sen!2s!4v1404496833842″ width=”600″ height=”450″ frameborder=”0″ style=”border:0″></iframe>
</div>
Here 75% is the default value of padding bottom as there is 600 width and 450 height. you can change it.
Note : This Seo Trick applies on all websites and blogging platforms like Blogger/Wordpress etc.
Thanks for being here on A1 Blogger Seo
Note : This Seo Trick applies on all websites and blogging platforms like Blogger/Wordpress etc.
Thanks for being here on A1 Blogger Seo
Leave a Reply