Introduction

Maps and Routing in Websites

Introduction

About myself

First of all, I would like to introduce myself: my name is Lukas Nussbaumer, I am from Italy, and this blog is going to be the work for my high school exam. Last summer I needed some of the things I will present later, and I found it quite interesting, so I decided to take maps and routing as topic for this final exam.

My topics - The 3 different solutions

Now on to what I am going to present: I will show ways to integrate different maps (mostly Google Maps and OpenStreetMap) into websites, and how to modify them using markers, pop-ups, and many other things. Also, I will explain how to make them able to route on their own, which is a very useful tool. My blog will be divided into 3 big parts: the first will be the “embed map” function Google provides on Google Maps. This one is the easiest to use; it takes almost no time, but it is not as customisable as the others are, for example, you cannot use markers, and the ways of interacting with that map are very few. Still, if you only need a map that shows one route from point A to point B, this is probably the best solution. It requires only very basic programming skills, no JavaScript is needed, and still gives a very good result. The second one is the Google Maps API. For this one you need basic skills in JavaScript, although most of the code can be understood from the documentation, which I will link in the sources. In this solution you can have markers, shapes, and many other things. You will have to get a Google Maps API key before you use it, but since most people have a gmail address anyway, and the key is for free, that should be no problem. In the third part I am going to talk about Leaflets, which uses OpenStreetMap as map, but provides the possibility of using markers, shapes, and also routing. This one is pretty similar to the Google Maps API, with the difference that it uses OpenStreetMap as map and not the Google Maps. The difference between these two maps will be the topic of another article.

Which solution is the best for you?

All these solutions are free, and OpenStreetMap is open source, so you can use the one that fits best for your requirements: if you need a simple map with maybe one fix route, the direct embed is probably the best solution for you. The other two are very similar, so you can choose the one of which you like the map most. If you need routing, you might want to go with Leaflets and OpenStreetMap, since the direct embed makes it only possible to display one fix route, and the Google Maps API makes it a bit harder to show routes, but that is just my personal opinion.

Comparsion of Google Maps and OpenStreetMap

Maps and Routing in Websites 

Comparison between Google Maps and OpenStreetMap

The different appearance of the maps

Today, I will talk about the differences the two maps themselves have, but also about their common features. To start off I want to talk about the differences in the appearance of the maps. This is most easily explained with some pictures, so here we go:

@OpenStreetMap contributors                                                @Google Maps

In both pictures you can see the same place, Central Park in New York. The one on the left is taken from OpenStreetMap, the right one is from Google Maps. You will immediately notice that the two maps have a different appearance: while Google Maps mostly shows the name of restaurants, shops, museums, etc., OpenStreetMap shows more names of the places in the park. This does not mean they are not written in the respective other map, but the two maps just have different priorities of which names they show. But not only are the names different, also the surfaces: OSM (OpenStreetMap) uses more colours, but for some users taste, there could be too many, whereas Google Maps sometimes looks a bit empty. But what applies for less crowded places? Here you can see Reinswald, a place not so far away from where I live:

@OpenStreetMap contributors                                                     @Google Maps

I allowed both maps auto-route the hiking path from the top end of the cable-way to the so-called “Kassianspitz”, a mountain peak a few kilometres away. OpenStreetMap suggests the shortest possible solution, using existing hiking trails and gives me a route about 6.3 km long. But Google Maps lacks of these hiking trails in many areas, for example in the one given here. For it, the shortest route is going all around the mountains and approaches the peak from the other side. The route that Google Maps calculated is 68.3 km long! The different result comes from the origins of both maps: Google Maps belongs to Google, which documents the map on its own. OpenStreetMap is open-source, and anyone can contribute to it, so maybe a resident of Reinswald, maybe someone else, once documented the different trails that are offered in this area. Anyone can contribute to OpenStreetMap, which makes it also possible to document outlying places. If you want to use a map, be sure to check if the place you want to display, or the trails and streets you need for your route exist in the solution you prefer.

The different licenses

Another big difference is the licences both maps have: OpenStreetMap has, as its name already suggests, an open license, whereas Google Maps uses the Google copyright, with some additions. You can find more information here: Google Maps and OpenStreetMap. The use is free for both, but, depending what you need the respective map for, you should check these copyrights, especially if you need them for commercial use.

Which one is better?

I personally prefer OpenStreetMap, because of its appearance that has more colours, and a lot more information. I also think that Google Maps is more oriented towards business, it primarily shows shops, theatres and museums, whereas OSM prioritises cultural names or names of important places. If you only need a static map, I would still take Google Maps because its use is simple, but if you need more features, I would suggest using OpenStreetMap.

Google Maps - "direct embed"

Maps and Routing

Google Maps - "direct embed“

What is it? 

The “direct embed” function is provided on the web version of Google Maps, and it is easy and free to use. It is really simple: you go to the place you require on the map, zoom in just as you want, and than you go to the menu. There you find the “Share or embed map” option, where you will find the possibility “Embed map”. This will provide you with the code of an HTML iframe, which you just have to copy and paste into your HTML-code. This will show the exact same map you see in the web on your page, without further modifications needed. You can choose the size of the picture, but with some CSS you can personalize the iframe later, just as you need it.

Is it good?

This is the easiest of all solutions, it takes almost no time to implement, but still it gives really good results. The page visitor can freely move around the map, just as he can at Google Map, but when the page is loaded, it will always show the same location, with the same zoom. If you just need a map to show where your business is, or to provide one single static route, this is probably the solution you will go for, for the reasons I stated above. The problem is, if you need a map that can show different locations and has flexible routing, or if you simply don't like the layout of Google Maps, you should not use this.

Below you can see how this solution looks like: