ADD RESPONSIVE GOOGLE MAPS TO WEBSITE

HOW TO ADD RESPONSIVE GOOGLE MAPS IN YOUR WEBSITE

 Google Maps is the best mapping service that you can use to find the locations you want. If we are going to any unknown places or if we want to search a place and to find its route then Google Maps is the best choice for all kind of people. All that you need is the internet connection to use it.     It can be used in several ways, such as to locate some business area, major cities and even to look the street maps. Normally, you go for zooming to see the exact place. To make your websites to be attractive and easier to interact with your clients or visitors, you may go for interactive multimedia. For the gaming websites, animation does the major role, to make it impressive.

In terms of business sites, we want some professional look to the site. The site should be clear, more interactive and efficient enough to attract more people toward it. Clients may be form different areas. Especially for international companies, clients can be from different parts of the world. In order to help for their navigation, they can include Google maps in their sites. So that they can find the path to visit the company, which is in another country.  Google maps help us with the option to embed maps in your site. This map should be added in such way that it should not occupy the major space of the website. And also, it should be responsive enough for the clients or visitors of your site.

Google Maps on other hand fits for all desktops. It will not fit for all your devices like mobiles, etc. You have to resize or scroll to view your location in full page.

How to add the Google Maps, fit to your web page? Just go to the Google Maps website and zoom in to your desirable area and embed it in your website. Click on the Gear icon in the left and choose the Embed Maps option in the menu.  Also, by using some CSS technique, you can easily embed your Maps into your website. Refer to the following CSS code and use it to include it in the site.

.Flexible-container

 {

    position: relative;

    padding-bottom: 56.25%;

    padding-top: 30px;

    height: 0;

    overflow: hidden;

 }

.Flexible-container iframe,

.Flexible-container object,

.Flexible-container embed

{

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

}

In order to place it directly, the following HTML code can be used.

HTML

Place following HTML Code directly in your HTML.

 <!– Responsive iFrame –>

 <div>

    <iframe width=”425″ height=”350″ frameborder=”0″ scrolling=”no” marginheight=”0″ marginwidth=”0″ src=”https://maps.google.ch/maps?f=q&amp;source=s_q&amp;hl=de&amp;geocode=&amp;q=Bern&amp;aq=&amp;sll=46.813187,8.22421&amp;sspn=3.379772,8.453979&amp;ie=UTF8&amp;hq=&amp;hnear=Bern&amp;t=m&amp;z=12&amp;ll=46.947922,7.444608&amp;output=embed&amp;iwloc=near”></iframe>

</div>

Through the Google map, you can reach any part of the world. So use these Maps in your website and be interactive to reach your higher aims.

Leave a Reply