Quick Tip: Embedding 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:

This is not an image..

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".