Custom Software Apps & SharePoint Consulting

How to Embed Interactive Maps Into Your App or Website

In the app world, features reign. This is because our collective thirst for connectivity knows few limits in this digital age. According to a now-legendary study, more people own mobile phones than toothbrushes. Today, the average Android user checks phone messages every 12 minutes. Yet, despite this, creating a competitive app remains a challenge. Although there are 2.5 million apps on the app store, the average person uses only about 9 of them regularly.

To compete, your app needs to stand out. Accordingly, 66% of users wish they could do more with their favorite apps. So, if you pack your app with engaging, valuable features, you’re far more likely to score a coveted spot at the top of the app list. It’s the same with web apps.

And, there’s no feature quite like maps. In today’s location-based ecosystem, geospatial data is gold. Whether your customers use it as a navigational tool, or your vendors offer it as a search-based tool for their customers, interactive maps can transform your business.

Below, we discuss mapping tools, embeddable maps you can insert into your application to show users exactly where they need to go. So, instead of forcing users to rely on another mapping app to find your location, they can simply find you through your app. It makes life easier for them — which means lower churn rates for you.

What Are Embeddable Mapping Tools?

We’ve all pulled out our phones and asked Google or Siri to guide us to the nearest McDonald’s. And, most of us have used Google Maps (or MapQuest) to help us navigate unfamiliar streets. Although no one knows exactly how much Google invested to build its hyper-complex Google Maps software, we imagine the figures must have been astronomical. Still, its efforts have paid off in huge dividends.

Today, you can use Google Maps, Bing, and OpenStreetMap for free on your app. You’re basically getting billions of dollars of R&D for free. Embeddable mapping tools are pieces of code you insert into an app to offer users mapping capabilities. So, the question isn’t whether mapping tools bring in X amount of money. The question should be: why not take advantage of the opportunity to embed a map on your app for free? You don’t pay a penny, and your customers save the extra step of looking for another map app.

Finally, we’ve seen these maps used in incredibly interesting ways. Lego and Chrome teamed up for Build with Chrome, an experiment that gamified mapping by allowing users to build Lego objects on Google Maps. We’ve also seen travel apps that give you discounts when you’re near partnered businesses. And, we’ve all seen how on-demand, gig-economy-based services use maps to improve the customer experience.

So, how do you add a mapping tool to your application?

3 Options to Embed Interactive Maps Into Your Web/Mobile App

You have three primary options when it comes to mapping tools: Google, Bing, or OpenStreetMap.

1. Google Maps

Google Maps is the de facto map service on the planet. Daily, over a billion people tap into Google Maps to navigate their way around town. If not for China’s Great Firewall, Google Maps would be the most popular mapping tool in every country. Here’s a secret: embedding Google maps onto your web app takes less than three minutes. Here’s what you do:

  1. Open Google Maps.
  2. Go to the map (or Street View) of your location.
  3. Click Menu (top left).
  4. Click Share or embed map.
  5. Click Embed map.
  6. Pick the size you want by clicking the down arrow to the left of the text field.
  7. Copy the displayed HTML code. Paste it into your web app.

That’s it! You can also use Google Maps Platform to add an API to your app or web app, a better option if you want to offer more complex mapping capabilities.

Google Maps is, by far, the most popular mapping tool. But, it’s not your only option.

2. Bing

Bing Maps may be in second place in the “mapping war.” However, that doesn’t mean it’s inferior to Google Maps. For its part, Bing has a user-friendly API, high-resolution mapping images, and virtually all the same features as Google Maps. While it doesn’t have biking routes or quite as many locations, it still gets the job done. You can use Bing’s Embed Map tool to generate a map of your location on your web app.

All things considered, Bing does some things better than Google. We like its detailed travel instructions, traffic updates, and traffic camera images. So, Bing isn’t in second-place in terms of features, just branding. However, there’s a huge disadvantage to Bing: it offers a limited mobile experience for a maps app. Google Maps dominates mobile (it virtually captures the entire market). So, that’s something to be aware of when you’re embedding a map on your web app. We highly recommend Google for mobile apps.

3. OpenStreetMap

For number 3, we could have included a few different options. Most people are going to use Bing or Google. But, there are some tempting alternative solutions, such as TomTom, Waze, and HERE WeGo. That said, OpenStreetMap has a particular advantage we want to highlight: it’s open-source. So, thousands of users across the globe regularly add new OpenStreetMap data. So, it may be the most accurate-to-date map on the Internet.

Of course, there are disadvantages to OpenStreetMap. It doesn’t have satellite imaging or StreetView. But, its accuracy and open-source backbone make it the preferred option for TripAdvisor, FourSquare, and Uber. To embed OpenStreetMaps, you simply:

  • Go to https://www.openstreetmap.org.
  • Navigate to the area you want to display.
  • Click on the sharing button.
  • Click the “HTML” option.
  • Click “Add a marker to the map.”
  • Copy the HTML text in the box (starts with <iframe).
  • Past the code into your web app.

OpenStreetMaps also has plenty of user-created libraries if you want to add it to your mobile app.

Embed Interactive Maps to Win the Location-based Marketing War

Embeddable maps can certainly help you win the battle of the download. But, you also need all the right features, UX, and UI to gain a competitive edge. At Entrance, we help companies build best-in-class web and mobile apps for their customers. Are you ready to take your brand to the next level? Contact us, and we’ll show you how you can embed interactive maps into your newest app.

Share this post with your friends

Skip to content