How to Display Google Maps Bigger Than Your Screen

Why would anyone want to increase the display size of Google Maps so that it exceeds the size of their screen? Your guess is as good as mine, but it can certainly be done!

One reason I can think of is to load up a large area at once, rather than wait for new areas to load each time you move around the map.

Another reason could be that you want to take a screenshot that’s larger than your screen (a full page screen capture tool is needed to do this).

Whatever your reasons, you can make Google Maps exceed the dimensions of your screen with the following 3-step method.

1. Make a basic web page

First we need to create a blank web page in Notepad or your preferred text editor, so that our map display has plenty of breathing space and no width restrictions.

Once you’ve opened Notepad, add this HTML code and save the document as a .html file. Without closing the document, check that you see a blank web page when clicking on the file and opening it in your browser.

<!DOCTYPE html>
<html>
<head>
</head>
<title>My Website</title>
<body>
</body>
</html>

2. Add the embed code from Google Maps

Now head over to Maps and go to the location you want to display. After choosing your map, find the ‘Share’ option, select ‘Embed a map’ and copy the code.

Paste the code in the body of your HTML document i.e. between the “<body>” and “</body>” tags.

<!DOCTYPE html>
<html>
<head>
</head>
<title>My Website</title>
<body>
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12088.351326260195!2d-74.0059132!3d40.7600929!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew%20York%2C%20NY%2C%20USA!5e0!3m2!1sen!2suk!4v1709133511894!5m2!1sen!2suk" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</body>
</html>

You don’t have to stick to the default map type – this method works exactly the same for satellite imagery, Street View and photo spheres.

3. Increase the width and height values

The default width and height values in our example are 600 and 450 respectively, which is far too small for our computer monitor, which has a 1600 x 900 screen resolution.

We need to navigate to the bit of code that controls the width and height of the map display, and increase them. We increased ours to 6000 and 4500.

<!DOCTYPE html>
<html>
<head>
</head>
<title>My Website</title>
<body>
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d12088.351326260195!2d-74.0059132!3d40.7600929!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew%20York%2C%20NY%2C%20USA!5e0!3m2!1sen!2suk!4v1709133511894!5m2!1sen!2suk" width="6000" height="4500" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</body>
</html>

After doing this, a small portion of the map takes up the whole screen, and we have to do a lot of vertical and horizontal scrolling to see everything. This means we’ve achieved our aim of displaying a map that’s larger than the screen.

Remember to save your document each time you make changes, otherwise you won’t see the changes when you open it in the browser.

Summary

To get Google Maps to display a map that’s larger than your screen, you need to embed it in a basic web page and increase the width and height values to something larger than your screen resolution.