Right from the time Google released its Google Maps tool, embedded mapping tools have now evolved to offer its users a host of navigational capabilities when on the move. Smartphone users can now easily find their way to the closest McDonald’s outlet using Google or Apple Siri.
Businesses are using interactive maps on mobile phones in various interesting ways. In association with Google, gaming company Lego is enabling gamified mapping where players can build Lego objects on Google Maps. Similarly, travel enthusiasts can plan their next travel plan using the Travel App Map – which is based on Google Maps.
Designed and built by an online community of mappers, OpenStreetMap for WordPress sites is a popular alternative to Google Maps. OpenStreetMap (or OSM) focuses on local street knowledge by adding data about local roads, streets, railway stations, restaurants, and much more.
Next, let us look at why business enterprises must use the OpenStreetMap WordPress plugin on their websites.
Why Use OpenStreetMap?
Here are some OSM features that make it popular:
- Easy to integrate into any WordPress page or post
- Support for HTML popup marker
- Maps with geo-tagging of posts (or pages) as linked markers
- Maps with auto-generated track based on geo-tagging
- Support for OpenLayers library
- SSL connections
- Support for multiple languages including English, Japanese, French, and Russian
Here are some reasons why businesses must use OpenStreetMap in WordPress to embed maps into their website:
- OSM is free and open-source, thus allowing any user to access, use, and even share their map-related data. This enables users from all parts of the globe to contribute and be part of the growing OSM community. OSM users (or contributors) range from mapping enthusiasts, GIS professionals, humanitarians working in disaster-affected regions, and OSM engineers.
- OSM can provide global reach through its unified tagging schema. Effectively, OSM provides map data for every country along with the best data quality. Being open-source, contributors can also improve the data quality.
- OSM places emphasis on local geographical knowledge. Contributors can use a variety of technologies including aerial imagery, global positioning systems, and field maps to verify the OSM data and ensure that it is up to date.
- OSM provides continuous updates (with no release dates) where contributions to the map are ingested immediately.
- All services offered by OSM are legal and operated by the OpenStreetMap Foundation (OSMF) on behalf of its online community.
- OSM has an extensive partner network with WordPress hosts like UCL and Fastly.
- OSM’s customer base includes major sites like Amazon and Facebook, along with social websites like Foursquare, Pinterest, and Snapchat.
Next, let us see how to embed the WordPress plugin, OpenStreetMap in your website.
How do I embed OpenStreetMap into my website?
You can choose to directly embed OpenStreetMap into your website without installing or activating any plugin.
Here are the steps you need to perform:
- First, open the OpenStreetMap website.
- Next, navigate to the map area that you want to embed on your website.
- Click the “Share” icon (on the right-side panel).
- Open the HTML option, then click “Add a marker to the map.”
- Copy and paste the available HTML code into your website or web app.
This is a quicker way to add a map to your website. However, it is more efficient to install the WP Leaflet plugin and use it to add a map to your website. Let’s see how to do that in the next section.
How to use the WP Leaflet plugin for adding an OS<?
The WP Leaflet plugin allows you to create and customize free open-source maps using the OpenStreetMap API. This plugin is the easiest way to create and display an OpenStreetMap on any webpage using shortcodes.
First, let us see how to install the WP Leaflet plugin on your WordPress website. Here are the required steps:
- Download the WP Leaflet plugin (leaflet-map.zip file) to your local computer.
- Sign in to your WordPress admin dashboard account. For example, https://mywebsite.com/wp-admin
- From the Plugins panel (on the left-side menu), click “Add New,” then click “Upload plugin.”
- Browse to the folder containing the leaflet-map.zip file, then click “Install Now.” This action will start installing the WP Leaflet plugin on your site.
- On successful installation, activate the plugin to start using it.
After installation and activation, you can now see the “WP Leaflet Map” folder on the left-side menu of your WordPress dashboard. You can click this folder to view (or change) the plugin settings.
Next, let us see how to add an OSM map with a marker to your WordPress site. The best way is to generate a shortcode for the WP Leaflet plugin and then paste it on the target page.
- For the installed WordPress Leaflet plugin, navigate to the “WP Leaflet Map” page in your WordPress admin dashboard.
- Click “Add map” button.
- From the “Map information” panel, you need to perform the following actions:
- Select “OpenStreet” as the mapdata provider.
- Enter the map title URL, which will display the map skin title. You can leave it blank to use the default title.
- Enter the map title that will appear in your webpage or blog.
- Set the map width and height.
- Select the various map zoom levels. Default zoom value is 5.
- Save the changes.
The next step is to add locations to your map by using the “Add locations” link. Once you have added all the locations, you can select those that you want to add to your new map. After making the changes, save the map.
Conclusion
As compared to Google Maps, the OSM community owns this mapping service (including every change), while Google Map changes need to be approved by Google. With thousands of OSM users making real-time map changes, every map update is immediately visible to other users.
Flipper Code can help in creating customized maps that can attract more visitors to your local store or office premise. We offer a range of WordPress services including plugin development, WooCommerce development, and bug fixes.
