CSTLdesign News

Embedding the New Google Maps

The all new Google Maps was made openly available to the public back in July, but it’s still a preview of what the final product will be and therefore lacks a few familiar features.


For example, have you tried to embed a newer Google map into a web page? The reliable old “link” button is nowhere to be found! Some folk will suggest you revert back to the old Google Maps, embed an iframe in the original way, then shift back to the newer Maps preview once you’re done. But there’s another way, and it’s a way which will help you take advantage of the newer, prettier Google Maps, like this:

Maps Engine Lite

Maps Engine Lite (Beta) is a tool which allows you to design and save your own custom maps. In order to make use of it, you’ll need to have a Google account and be logged in.


You can then publish and share your maps, so let’s begin by clicking on “New map”:


Let’s enter the Envato HQ address into the search field as an example:


Having located the office and added a marker, we can now give our map a name by clicking on “Untitled map”:


We can also click on “Untitled layer” to give that a name, after which we can add all sorts of locations, routes and areas to our map. We can import via file uploads too, but for the time being we’re just going to concentrate on our single marker. Make sure you’ve added the searched location to your map, then you can concentrate on the marker features.


Now Envato HQ is listed under the “Business locations” layer, we can alter its color, label and even the icon. Google have provided a load of customization possibilities here, so have fun exploring! I’ve given HQ a yellow office icon.


One other nice feature of the newer Google maps is its various themes; click on “Base map” and knock yourself out. I’ve gone for “White water”:


Change Share Settings

Having completed our map, we now need to alter the share settings, so click the “Share” button in the top right.

This will bring up a dialog in which you can choose to change the visibility of your map from “Private” to “Public”. This is necessary in order to embed your map in a web page.


With that done, click on the “folder” icon and select “Embed on my site”.


You’ll be given an HTML snippet, like this:

<iframe src="http://mapsengine.google.com/map/embed?mid=z-BEFzFo7gdM.kYdiUKVQpQQI" width="640" height="480"></iframe>

for embedding an iframe into a web page.

Make Your Map Fluid

One last thing, your map isn’t exactly responsive in its current state. Let’s wrap it in a fluid element (much like those used for fluid video embeds) so that we can include it in a responsive layout.

First, we wrap an additional element around our iframe:

<div class="fluid-wrapper">
<iframe src="http://mapsengine.google.com/map/embed?mid=z-BEFzFo7gdM.kYdiUKVQpQQI" width="640" height="480"></iframe>

Then we size the wrapper using padding (a fluid height property won’t work) and position the iframe within it:

.fluid-wrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ height: 0;
.fluid-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;

This padding of 56.25% gives our container a 16:9 ratio, something worth taking into account for video, but you can make your Google Map rectangle whatever proportions you wish.


That’s it! Dead simple really, but one of those useful little tasks which has been made temporarily awkward while Google make the transition to the newer Maps.

ps) Did you catch the recent Google Maps Street View trek of the Galápagos Islands? Well worth the trip..