Blog

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.

Please follow and like us:
Read more

Rent a Car Mobile App

Race Rent a car Mobile App with reservations and payment right from your mobile. Easily check available cars, prices and book in advance your favorite car.

Mobile App for car rentals displaying all the available cars, with online reservations and payment using e-commerce. When cars are not available, the reservation button disappears to prevent accidental reservations for unavailable cars.

 

Please follow and like us:
Read more