Using maps on your website for free

Keywords

maps, Google Maps, OpenStreetMap, website, website development

The Problem

If you own a small website that helps promote your local business or product you may want to insert map with marker that describes where your office is located.

Many website owners want to embed Google Maps to their websites. Reasons are simple: it’s easy and most visitors know Google and like maps from Google. But in 2018 Google closed free usage of their API. You need to register on Google Maps Platform, provide your billing info and get your own API key in order to embed map to your website. Thats why on some old websites you can see the next picture:

map

This is happenes because of "old" Google Maps usage – there isn’t API_KEY parameter in the code.

The Solution (easy but non-free)

Just go to Google Maps Platform, log in there, click on Get Started button, follow steps there and insert API_KEY value in the following place to your Google Map initialization script.

FYI every 1000 map renders will cost you 7$.

https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMa

Then, you’ll have fully working map with the next code:

<!DOCTYPE html>
<html>
<head>
    <style>
        /* Set the size of the div element that contains the map */
        #map {
            height: 400px;  /* The height is 400 pixels */
            width: 100%;  /* The width is the width of the web page */
        }
    </style>
</head>
<body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>
    <script>
        // Initialize and add the map
        function initMap() {
            var pointCenter = {lat: -25.344, lng: 131.036}; //set your location lng and lat
            var map = new google.maps.Map(
                document.getElementById('map'), {zoom: 4, center: pointCenter});
            var marker = new google.maps.Marker({position: uluru, map: map});
        }
    </script>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
</body>
</html>

The Solution 2 (easy AND free)

We’re going to use OpenStreetMap (Wiki reference). It’s totally free to use, and it will be a piece of cake to insert map into any website.

In order to make OpenStreetMap work we’ll need additional JavaScript library called Leaflet. It’s easy as like as Google Maps. Let’s take a look on a source code:

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/leaflet.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/leaflet.css">
    <style>
        /* Set the size of the div element that contains the map */
        #map {
            height: 400px;  /* The height is 400 pixels */
            width: 100%;  /* The width is the width of the web page */
        }
    </style>
</head>
<body>
    <h3>My OpenStreetMap Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>
    <script>
        var map = L.map('map').setView([51.495, -0.09], 15);
        var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
        var osmLayer = new L.TileLayer(osmUrl, {
            maxZoom: 19,
            attribution: 'Map data © OpenStreetMap contributors'
        });
        map.addLayer(osmLayer);
        var markers = [];
        var marker1 = L.marker([51.495, -0.09],{title:"marker_1"}).addTo(map).bindPopup("Marker 1");
    </script>
</body>
</html>

It will render to something like this:
osm map

Please take a look that this code DOESN’T use any API keys, so it’s totally free and can be inserted to your website without your credit card information.

You may want to get rid from CDN links, it’s up to you.

Conclusion

Today I’ve shown you how to avoid Google Maps on your small website in case if you don’t want to enter your credit card info to Google, or just don’t want to spend extra money.