zoo fix in google map,mobile app development company Lebanon, mobile apps android & ios, website development company Lebanon, web design company in Lebanon, software development in lebanon,best web and mobile agency in lebanon,mobile app developers,ecommerce in lebanon, ecomemrce website development in lebanon,web development company in lebanon,ecommerce mobile apps in lebanon, emarketing in lebanon, social media in Lebanon, social media agency in lebanon, web agency in Lebanon,web development in Lebanon,websites in lebanon, website companies in lebanon

How to Fix the Zoom in Embedded Google Map & Frame attributes

Problem with displaying Google Map on your site

In the new Google map, the share > embed map on my website, seems to have a problem with the zoom.

The embedded map shows barely the main street of the location you want, making this quite difficult to use.

Visitors to the website will have to manually zoom out by pressing the minus sign on the map several times to be able to use the Google map, not only is this annoying, but also looks very unprofessional. Luckily the solution is very simple, you just need to add the zoom level within the iframe code to fix this issue.

Solution

There are 2 ways to fix the zoom in Google map, depending on whether you are using the Classic Google Map or the New Google map. Below I will give the solution to both.

After creating your map, you click on: Share > embed map on my website, and google will give a code for you to copy and paste into your website.

the code will look something like this:

<iframe src=”https://mapsengine.google.com/map/embed?mid=zaFvX1PrDnRHjN3qlg-MJo” width=”640″ height=”480″></iframe>

In the new Google maps, just add &z=# where the larger the # the more zoom in view, the smaller the number the more zoom out view of the map.

Please note that the &z=# should be added within the “” of the scr.

Example, if we wanted to zoom the map to 12, then the code above would become:

<iframe src=”https://mapsengine.google.com/map/embed?mid=zaFvX1PrDnRHjN3qlg-MJo&z=12” width=”640″ height=”480″></iframe>

in the old classic Google maps, you would add &zoom=#

so the code would become:

<iframe src=”https://mapsengine.google.com/map/embed?mid=zaFvX1PrDnRHjN3qlg-MJo&zoom=12” width=”640″ height=”480″></iframe>

Other properties you can  also change in the code above is obviously the width and height of the iframe, such as:

<iframe src=”https://mapsengine.google.com/map/embed?mid=zaFvX1PrDnRHjN3qlg-MJo&z=12″ width=”720” height=”960″></iframe>

Or you could add/remove a border

<iframe src=”https://mapsengine.google.com/map/embed?mid=zaFvX1PrDnRHjN3qlg-MJo&z=12″ width=”720” height=”960″ frameborder=”0″ style=”border:0″></iframe>

by specifying a border equal to zero, the map appears to be part of the page without any borders surrounding the iframe.

 

Click for other Tips & Tricks in our blog.