Offer different map services

I thought you might look into Mapbox as a Google alternative which is less expensive. Allow us to choose which map links we could offer.


Mapbox seems to be a solid choice

Other options mentioned also are Mapkit for iOS. BINGMaps and HEREMaps

1 Like

Hi @405media,

the maps situation is very complex. The first thing to realize is it’s so complex that very very few can self-host a map, so since your site will be connecting to a third party, it will need to be behind the consent banner.

Google Maps pricing is extremely confusing, I’m not sure the second article you mention clears that up much. Sparkle does not generate the more expensive street view code anyway.

I have looked at mapbox a lot, but I have never found an actual deployment where the map usage felt anywhere near as snappy as Google Maps.

Even Apple Maps (as seen via are not as fast as Google Maps, there might be some (fuzzy/unclear) savings, though as far as I can tell to use Apple Maps and mapkit you need to be subscribed in Apple’s developer program ($99/year) even just to get started and set up their arcane authentication mechanism.

Do you understand Bing Maps pricing? They don’t even ever say “free tier” anywhere, though presumably there is one. The 125000/year seems fewer (though maybe comparable) to Google’s… $200/month? Who knows?

Here seems to have maybe the most generous free tier, but I guess the question is, is any Sparkle user actually exceeding Google Maps free tier? Or is this about getting more maps features? Or is it an anti-Google stance? I could concur, but it seems like it’s a choice of the least evil and I’m not sure there’s a winner here.

So what’s your use case? What’s the restriction in using Google Maps?

1 Like

Well one thing Mapbox seemed to offer more customizable options and offered much more than google does… I haven’t tried the others… as far as google, your color scheme needs to offer a small thumbnail preview or something… or the dropdown should just show a list of thumbnails not names as they are pointless… just ideas… seems you should at least allow us to choose whom we wanted maybe in the way of preferences set default map provider, or as a dropdown selection… Ive been noticing more Here installations on various sites so perhaps it needs more looking into as well. The question isn’t simply a price choice, but looks, customizability, and user preference of UI

What about - I have used this before on several web sites. Not sure if the API allows for embedding of openstreetmap into an actual program or not though.


Yeah that would need to be figured out. I haven’t done the research sorry, but the performance is even worse than mapbox.

Sorry for being late to the party on this topic, but I’ve got rid of map embedding altogether. The one thing I’ve noticed is the large number of people that use mobiles these days. If a map is embedded into the site, it’s often too small for people to use when viewed on a mobile device. This often means they have to click the map to have it open in a new page so that they can use the various tools that the map-app offers them.

Given that most people will need a larger view of the map, I’ve turned to a simple solution that still requires the click, but without the embed code. The service I use is “what3words”. This allows you to pinpoint any location within a 3m X 3m grid. Once you have the location, you get 3 words that pinpoints the exact location. All you then do is create a link in your webpage. When clicked, the map will open in a new page and will offer all the facilities you will find in Google Maps etc. In fact, the app is simply an overlay for mapping apps, so users can choose between the more popular mapping apps available.

The nice thing about this solution is that it will open the map in a new window (as does Google Maps) if you’re viewing on a desktop or laptop. It does this by opening the map reference in the “what3words” website. However, if someone clicks the link from a mobile, they will be given the choice of viewing the map online, or downloading the free “what3Words” app. Once that is installed, the map will always open in the app if the link is clicked again in the future.

It’s a simple option that does away with displaying a small map and replaces it with a simple link such as shown below.

This is a totally free service and is very accurate. Furthermore, your map doesn’t get littered with all the other businesses that are often attached to a google map. Here is what the map displays like in satellite view:

Once opened, users can get navigation instructions using any of the popular mapping services as shown below.

Its a nice option that doesn’t require any embedding and allows mobile users to use a mapping app in their devices.

1 Like

Interesting thanks @francbrowne. I think seeing something that looks like a map is reassuring to a user, or more immediately triggers a “oh let me tap on that” in who’s looking for a location.

I’m totally with you in opening the native maps app though, much better.

Also embedding a google map in any form (full or even static images) triggers the need for cookie warning and GDPR/CCPA concerns. And on the other hand Google terms don’t allow you to save a copy of the map image.

I wish there was a service that produces a reasonable map image for any location, to be saved in the website and used to link to the one of the map providers.

I did try embedding the what3words map in a website and it DID work. However, it doesn’t show the map until published online. If viewing off-line or in preview, it shows the what3words splash screen. However, all that seems to disappear once published on-line. Certainly, there would be nothing to stop someone making a screen shot of the map produced by what3words and then using that as an image link in a webpage. I have a couple of clients that have done this and it works just fine. Anyway, it’s an option and not a bad one at that. It certainly helps remove the dependency on one specific mapping app.

Interestingly, this is the same app that is often used by the emergency services when trying to locate someone. So, it’s not a bad app to have users download to their device. If they ever get into trouble, they fire up the app and it will locate them wherever they may be. They can then relay the 3 words to the emergency services who will then be able to locate them. - A great tool if you suddenly find yourself parked in a river in the middle of nowhere!!!

Interesting discussion…

I have created many mobile sites with the end-user in mind and so when they view the Google Map they have ample room to manoeuvre the map or enlarge it with not leaving the website. And that is the key! You try your best to keep a potential user on your website because once they leave the % rate of them coming back is very low, especially on mobile.

The other thing I have found is that you work your website to minimise the steps the end-use needs to taker because the more hoops you get them to jump through the more the frustration builds and then they are out. To view a map to give directions needs to be simple, clean, and efficient with no extra introduced steps that will frustrate the user, and again the main point of any website is to keep the user on your website as long as possible before sending them off to another website or downloading.

I understand what you mean. However, if you embed a google map and someone wants directions to find you, or wants to see a larger map, they will still be taken away from the site in a new window. With many people using the directions function in google maps on a mobile (whilst driving) they have to be in the google map app. The what3words link does much the same thing - you click the link and a map opens in a new window - just like google. I think it’s become an accepted norm that if you want to use maps for direction purposes, you simply have to enter the app in a new window at some point.

I guess the only advantage of a google map is that you can zoom in and out of the map within your webpage if you’re on a laptop or desktop, but on mobiles you often have to click on the larger map option to see these controls. Ultimately, most users will open the larger map to see where they are going and get the important driving instructions.

Of course, if it’s a business that only caters to a small neighbourhood, a small map display may be sufficient for the locals to find you. But for people who may be travelling from further afield, they will tend to go for the big map option and get exact directions. In any event, maps don’t take people away from your website - they tend to always open a new window or tab. When they close the map, they are still on your webpage.

This is how a map looks when the url is added to a sparkle page through the code widget:

It pinpoints the exact location, gives you the zoom options as well as the street view option, and if you click the three dots at the side of the 3word coordinates, you get the options of getting driving instructions on the mapping platform of the users choice. Here is what you see when the 3 dots are clicked:

And here are the choices the user gets for directions:

Notice that it is a google map but you don’t need an API key.

I also understand what you mean @francbrowne, but in the end we are talking about human psychology which is an important element of website design and building nowadays. Users have become very online savvy and I agree they will eventually move to “enlarge map” but you want to make that the last action because most of the time they won’t be back, especially on mobile.

In the past I use to use map screenshots and my clients fairly early in the piece had me know that they were getting client complaints - “your map doesn’t work as well as the other website maps”, so a screenshot of the map is something I don’t use nowadays.

So a very large Google Map (and I’m talking mobile now) that takes up a minimum of 3/4 of the screen’s real-estate is ample room for them to see more and enlarge. Once they have done viewing the site than “enlarge map” will be their next step.

I’m not a Google fan by far and I try to use as little of their spying products as possible but an interactive map is something most users have become accustomed too but us designers need to make a good job of it so the last thing they do is “enlarge map”. And to add Google nowadays gives you the choice on mobile whether you want to remain in the browser or download an app when you ask it to present the directions.

But, what3words does exactly what you’re suggesting. An embedded what3words map still gives them all the features they come to expect and a what3words embed is a whole lot simpler than setting up a google account and obtaining a web specific API. All you need is the URL and stick it in a code widget box (see my previous post). What I really like (and my customers like) is the fact that the millions of people who have the Uber app on their phones can simply book their ride to the clients location right from within the map app. They simply choose Uber as their directions choice and the transport is booked. They get picked up from wherever their device is and get taken to the location. It’s a great option, particularly for restaurants and night clubs.

But hey! who am I to say what’s good or bad. We take our choices and use whatever we think is best. Personally, I’m not a fan of map embeds as such, but if a client wants one, then what3words gives me the option of a link or an embed. Ultimately, its only going to be as useful as the user’s mapping app. Any user who is adamant that he should remain on the webpage where the map is embedded isn’t likely to need the facilities required of the underlying map app, so they will be perfectly happy with the map you present them with.

Anyway - a good discussion. Always nice to have a sensible exchange of views.

@francbrowne, Unless I’m doing it wrong (but then you are showing it the same way on your mobile screenshot above) I just get "/// word.word.word " and that is it. I then have to hover over it and click it to have it take me to an actual map. Is this how it works for you as well?

My focus is on a website and how it works on a client’s website.

I think it’s a minor Sparkle thing. Adding just the URL into a code widget frame doesn’t, in itself, seem to create the iframe. I think this happens on preview. Until it does create the iFrame, you tend to just see the URL as text. Also, be sure that you don’t select the expanding content option. and try clicking the refresh button under the code box. I’ve also noticed that if there is a line break at the end of the URL, that seems to cause just the url to display as text. Simply backspace the cursor so that it sits at the end of the URL. Don’t forget to click save when you’ve deleted the line breaks.