Creating responsive maps using Google Maps

In the second of our two real-world examples, we're going to look at making a responsive map using Google Maps. Responsive maps, I hear you ask? Surely this should come automatically, right? Well no, it doesn't, which makes its use a little awkward on mobile devices. Fortunately, we can easily fix this; the great thing about it is that it only requires a little additional CSS:

Let's make a start by browsing to http://maps.google.com, then entering the zip code of our chosen location. In this instance, I will use the UK office of Packt Publishing, which is B3 2PB.
Click on the cog, then select Share and embed map:
In the dialog box that appears, switch to the Embed map tab, then copy the contents of the text field starting with <iframe src=….
In a copy of the code download that accompanies this book, extract a copy of googlemaps.html in your favorite text editor and add the <iframe> code in between the google-maps div tags.

Next, add this CSS styling to a new file and save it as googlemaps.css:

#container { margin: 0 auto; padding: 5px; max-width: 40rem; }
.google-maps { position: relative; padding-bottom: 60%; height: 0; overflow: hidden; }
.google-maps iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; }

If all is well, we will see a Google Maps image of Birmingham with our office marked accordingly:

Creating responsive maps using Google Maps

At this point, try resizing the browser window. You will see that the map resizes automatically; the CSS styling that we've added has overridden the standard styles used within Google Maps to make our map responsive and accessible from any device we care to use.

Responsive Media in HTML5

By : Alex Libby

Responsive Media in HTML5

By: Alex Libby

Overview of this book

Creating responsive maps using Google Maps

Responsive Media in HTML5

By : Alex Libby

Responsive Media in HTML5

By: Alex Libby

Overview of this book

Creating responsive maps using Google Maps

Delete Bookmark

Confirmation

Buy this book with your credits?