Google Maps – Embedded, Static or JS – What’s Better?
Google Maps are used all the time in a variety of different websites for businesses to show customers where they are based, important landmarks and other valuable information.
There’s more than one way to get Google Maps integrated into your website, all with different results and levels of difficulty. The most common methods are:
- Google Maps Embed API
- Google Static Maps API
But what method is the best for your website? We’ve compared each method against different factors to analyse which method of integrating Google Maps is the best for websites.
What are the different Google Maps?
The Google Maps Embed API creates a map that can be interacted with through an iframe on your website.
An iframe is an HTML document embedded inside your main HTML document, think of it like a web page that shows the map embedded inside your own web page.
It can be easily embedded to add a simple map or Google’s street view using a simple piece of code that can be copy and pasted.
Since the map produced is interactive, it’s also tailored to the visitor if they are signed into a Google account. This means they’ll see their saved places such as home or work integrated into the map itself; they also may see on-map advertising which can be a point of concern for businesses.
Learn more about the Google Maps Embed API and how to use it.
A static map is loaded in like any other image, with the source URL containing the parameters for the map through a simple HTTP request.
Since the map produced is a static image, it won’t be interactive or tailored to the user but it can be stylised through the custom parameters.
An API key is required to use the Google Static Maps API which requires you to register your website on the Google API Console to get your API Key, learn more about how to get an API key.
Learn more about the Google Static Maps API and how to use it.
Ease of use
Embedded maps is the easiest to use and doesn’t even necessarily need an API key.
You can get the code directly from Google Maps by typing in the address and clicking share:
Then click the “Embed Map” tab at the top of window that pops up and copy the code above the map.
Using static maps is relatively simple but the requirement of an API key does make it more difficult to use than simply embedding the map.
The format for loading a static map is the same as loading any other image, except the URL is more technical as it includes the custom parameters to set up and stylise the map.
You have to know what parameters to set, which includes: the location the map focuses on, how far it’s zoomed out, where they markers are, how the markers look and more.
There’s plenty of documentation available to make setting up your parameters easier, including this Google Static Map Maker tool which makes it as simple as putting in your information on the left of the tool, copying the code on the right and pasting the code onto your website.
This is difficult to achieve inside a Content Management System such as WordPress without modifying the code of the theme itself or using a plugin.
Embedded maps have the slowest loading time as a drawback to its ease of use. Using an iframe loads an embedded HTML document inside your own HTML document, essentially this is loading an embedded web page before your main web page can be loaded, slowing down the loading time of your main page.
The iframe is called with 1 HTTP request, but the web page the iframe loads in makes other https requests to make the map which are outside of your control which slows down the loading time with little ability to improve the loading time.
If loading time is a concern for your website, embedding your map is not a good idea.
Static maps have the fastest loading time as you’re loading in a static resource in the format of an image that doesn’t load anything else in to create your map.
Loading in a static map makes 1 HTTP request, loading times for this request can vary but generally the loading time is less than a second.
You can also lazy load the image so that your web page can load faster while your map loads in the background.
Embedded maps have the least customisation available with little control over the final result.
Aside from editing the basic map values (point of focus, zoom, language) which should be a given, you can modify the mode of the map to show a place marker, attributed save, search results, directions or street view.
Aside from that, the basic iframe modifications including the width, height and frame border styling can be customised.
Static maps have a lot more parameters available to customise the styling and format of the map than an embedded map.
Aside from the basic map controls the format of the image (png, gif, jpg, etc) and size can be customised as well as the styling of the map.
The style of the markers can be customised which includes modifying the color, label, size and icon.
The map itself can also be customised to change the style of features like roads or parks as well as their elements such as the labels or background.
There is a limit to the customisation though as it is a static map, any customisations have to be applied when the image is loaded and can’t be changed dynamically after the image is loaded.
Search Engine Optimisation
The source URL of the iframe contributes to the SEO, as it provides a topic link to the location you’re displaying which benefits regional SEO.
The slow loading times of embedded maps can be a problem for SEO though, as the loading time of the web page impacts your SEO. The slower a web page is, the more people that will leave without waiting for the web page to load which signals a poor user experience and negatively impacts your ability to perform well in the search results.
Static maps have a lot of positive factors that contribute to the SEO of a web page. Like embedded maps, the source URL of the image has a positive effect on SEO and especially the regional SEO of the location you are displaying.
The quick loading times are also great for SEO as they don’t negatively affect the user experience, especially if the images are lazy loaded.
Alternative text can also be added to the image which helps define the context and topic of the image and further improve the SEO effects.
On top of this a good strategy to employ is wrapping the image inside a link which links to the marked location or directions from the user’s location to the marked location inside Google Maps.
Doing this drives the regional SEO to be even better, improves user experience and helps the static image operate as a call to action.
Embedded Maps – Best for Beginners
At the end of the day if you just want to keep it simple using the Google Maps Embed API is your best option available. There is some downsides in terms of customisation and loading times but if you’re looking for a simple solution embedding your map is by far the easiest to do.
Static Maps – Best overall
Google Maps Static API is the best option available overall. Out of the box using a static maps is relatively easy with fast loading times, decent customisation available and the best set up for SEO. Unless you’re looking for a very easy or highly complicated solution, using a static map is the way to go.