As you probably notice, Google Maps API started to be paid solution on July 16th, 2018. There is nothing wrong with it, we are paying for all features that are developed by the Google team. But what if you are an owner of the simple website and you just want to display a piece of the map with the location of your office? You can use OpenStreetMap.
Is it just that easy?
Below you can see the whole code required to create a map, position it, place a marker and create a popup with the office address.
- <!DOCTYPE html>
- <html>
- <head>
- <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin=""/>
- <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
- </head>
- <body>
- <div id="mapDiv" style="width: 800px; height: 500px"></div>
- <script>
- // position we will use later
- var lat = 40.73;
- var lon = -74.00;
- // initialize map
- map = L.map('mapDiv').setView([lat, lon], 13);
- // set map tiles source
- L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
- attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
- maxZoom: 18,
- }).addTo(map);
- // add marker to the map
- marker = L.marker([lat, lon]).addTo(map);
- // add popup to the marker
- marker.bindPopup("<b>ACME CO.</b><br />This st. 48<br />New York").openPopup();
- </script>
- </body>
- </html>
What have we done?
We used the Leaflet library to handle map displaying. In the example above, in the head section, I used the hosted version of the CSS and JS files, but you can download it on your server and host locally. In the body section, you can see the div element of id “mapDiv” which is configured to be 800 pixels wide and 500 pixels high.
The rest of the magic is simply placed in the script. At first, we are setting the latitude and longitude of the point we want to put the marker on (and this will be also the center of our map). Next, we are creating the map, which will be placed in our “mapDiv” element, centered on the position we have chosen and zoomed to level 13. You can change the zoom level to better fit your needs.
The important thing is the map source configuration. There are various map sources you can use, but in this example, I want to keep things straight so I simply configured OpenStreetMap tiles as the source. Please note that you have to keep copyright information in such a case.
We almost finished. Now we can place the marker on the map (on the latitude and longitude configured before). As the last step, we are placing the popup with the information about our company.
Is this really all I need?
This is the basic usage of Leaflet with OpenStreetMap. The Leaflet library, however, is much more powerful. You can draw on the map, place various objects, react to the events – you will find much more information in the Leaflet documentation.
Geolocation
The Leaflet library does not contain any functions to perform geolocation based on the address string. If you want to perform such operations, you should take a look at OpenStreetMap Nominatim API. It allows you to search using named locations (by street names, cities etc) and not named locations such as stores, pubs etc.
An alternative – static maps
There is also one more alternative worth mention. If you don’t want to deal with the JavaScript code and libraries, you can simply use static maps displayed as an image on your site. There is nice static map generator available.
