In addition to Google Map API, MapLibre GL JS is an open-source library for publishing maps on our websites. The maps are usually in the vector format and fast rendering in browser has become possible thanks to GPU.
Add a marker to a Map could be just as simple as the follows. Because the vectorized map is hosted on MapTiler, we would have to register an account, create an API key, and use the API key in the code. Fortunately, there is free plan available and there are a decent number of free requests given to the user.
The API keys can be abused by other users, because the API key is inside the HTML code. It is highly recommended using one key per web application and set allowed HTTP origins to prevent stealing of the key.
Finally, to make the embedded map compatible with the existing webpage, we used
iframe for integration.
The embedded map for this example looks like this.
Similar to the map of places that I have visited recently in my previous blog post “Embed Google Map for Free”, I created another one using MapLibre GL JS.
The free street map style from MapTiler lacks details comparing to Google Map. However, MapTiler allows the user to custom different map styles for different advanced purposes, which is something that Google Map could not do.