How to embed a map on your website? Find out what your options are

Mandatory Google Maps

API Key and Card Entry

In 2018, Google changed the licensing terms for embedding maps on websites. To fully utilize Google Maps services, you need to register for your own Google account and obtain an API key. Read the guide,  on how to create your own API key .

If you want to embed custom elements into Google Maps, it's not free

Google Maps is a paid service, but the final amount depends on the traffic to your website and whether you want to make map modifications (for example, inserting a custom icon with your logo). You can have it for free, or you may need to dig deeper into your pockets. But let's take it step by step.

How Paid Google Maps Work

The first step before implementing the website is linking your account with a payment card. In return, you receive a $200 voucher from Google every month. How quickly you use up this credit primarily depends on the number of modifications you make to the maps. If you have a smaller website, the voucher may be sufficient, and you won't need to pay anything. Larger websites will then pay according to the number of map views exceeding the voucher.

You Get Many Features with Google Maps

Google Maps offers many different features: you can place an icon corresponding to your website's logo on the map, mark all company branches, or just those closest to your location. It will show you the route to the store, street view, or – if you wish – outline the entire company property. 

Simply embedding a map on your website can, of course, be done without an API key, but instead of your custom icon, Google will display a standard pin.

Google Maps vol. 2 embedding via iframe

Save with iframe

You can also access Google Maps from the woods without the need to embed it through API keys. One option is to embed maps on the website using iframe code. It can display a basic map: the location of the store, the company's headquarters, or all branches at once. An ideal choice for a simpler website. 

Alternative for a Simple Website

The limitation in this case is the absence of customization for maps and the selection of a custom icon. On the other hand, you can choose from a large number of pre-made icons in various colors. 

You can see how we managed to embed Google Maps via iframe on our clients' websites OKM Group or Buse. You can insert your own iframe map with points directly from Google Maps.

It's also nice in Czech: OpenStreetMap

Get involved in map creation too

A Czech platform that is currently built by thousands of volunteers around the world – that is OpenStreetMap. No licenses, no fees, no providing payment information. The maps are simply free, and you can get involved in their creation yourself. OpenStreetMap offers up to 50,000 views per month.

Interactivity is encouraged

OpenStreetMap is interactive and allows for various modifications. We can create a location search engine for you, mark locations, add labels, flash animations, and much more. If you don't mind paying a little extra, you also have the option to choose any map background. However, keep in mind that registration and providing payment information will be necessary. More information or map options can be found on the Mapbox page.

We will ensure the map is embedded on your website

Your creative self can truly thrive here with all the possibilities. Embedding OpenStreetMap on a website does not require ownership of an API key. If you want this type of map on your website, your assistance is not necessary – we can handle the embedding ourselves with ease. Examples of this type of map can be seen on the websites of PUX clients like TerraHunt or LAC – see for yourself.

Seznam and Mapy.cz

Embed Mapy.cz using an API key

Seznam is also keeping up. Mapy.cz are Czech, and you can enhance your website with them for free. Unlike Google Maps, you don't have to worry about creating an account here. Mapy.cz operates through an API key. Since we have already implemented many maps from Seznam, your assistance is not needed for their integration on the website. 

Customizability of maps through the API key

A significant advantage of Seznam maps with the API key is their customizability. This allows you to offer your visitors features such as searching for your branches or stores by regions and cities. This was also a request from clients KDU-ČSL and Babyliss, for whom we placed a map with filtering on the website.

Mini API option

The localization of maps into Slovak, German, and English is certainly nice. For easier searching, Mapy.cz also offers the option to filter by regions, cities, least busy or closed routes while traveling. Seznam has even launched a Mini API option, which is simpler, faster, and non-interactive. It's ideal if you only need to embed a small static map with any marker on your website.

A Full Alternative to Google: Leaflet

A Simple Foundation and Many Plugins

Do you want an interactive map on your website that is also mobile-friendly? Meet Leaflet. It is simple, powerful, and only 39 KB in JavaScript. In addition to its core features, it offers a range of useful plugins, such as heat maps and geolocation. Its capabilities can match those of traditional Google Maps. Regardless of the browser or device you use, this software will run smoothly. 

Leaflet as Open-Source

Similar to Google Maps, maps are embedded on the web through an API. The difference is that Leaflet is open-source. This means it has an open source code and license, allowing you to use it on your website for free. 

Are you interested in the capabilities of any of the maps mentioned above? At PUXdesign, we can embed and set up Google Maps via API and iframe, OpenStreetMap, and Seznam Maps on your website. If you are considering maps, need advice, or want to implement them directly on your site,  get in touch with us .

Photo: Pexels.com