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.