Maps and Routing
Google Maps API
 |
| image taken from https://atendesigngroup.com/blog/google-maps-javascript-api |
What is it?
The topic today is the Google Maps API. It is a pretty big API, with many different functionalities, but we will focus on one: the JavaScript API. Its functionalities are similar to the one from Leaflet, as we will see later. Also, now we need to have basic knowledge of JavaScript, although it is pretty easy to use this API. Before you start, you need to get an API key here.
This solution is still free to use for smaller projects, but for commercial use you might want to check the Google licences, so you can be sure everything is legal.
Just one note before we start: I will not show every example and the code for it, because everything is documented pretty well, but I will put the references on Googles documentation. Also, since I cannot embed the scripts in this blog, I will put references so you can see what it looks like.
Embed a basic map
After we have our API key, we can go on with embedding the map in our site.
Basically, we create a <div> element, and manipulate it with javascript. The functions to do that are provided by Google, and have to be included in your HTML-page.
To show a basic map, we use the code suggested on the home site of the API which looks as follow:
<html>
<head>
<link href="/maps/documentation/javascript/demos/demos.css" rel="stylesheet"></link>
</head>
<body>
<div id="map">
</div>
<script>
function initMap() {
// Create a map object and specify the DOM element for display.
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
scrollwheel: false,
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
</body>
</html>
Insert your API key in the last script tag, and you will get this result, also shown in the image below:
As you can see in the script above, the things needed to make a basic map are the coordinates of the location, and the zoom level you desire. You can add many more features, which you can see in the documentation. Here you can find code samples, with explanations, that should help you if you want to add more features to your map. I will now go through some of them.Add Markers
One thing that the API has, and the direct embed solution doesn't have are markers: you can simply add one by adding the following code to your script:
This will add a marker on the specified Location. Note that the variable myLatLng looks like this:
As you can see, it is an array that contains both latitude and longitude to identify a point on the map. This makes it pretty easy to show different maps, or positions on the map, which is a main reason to choose the API: the possibility to adapt. You can simply have a variable that contains this information, and adapt it to the situation: if you want to show the marker in location A, use its coordinates, if you want the marker to be in location B just use other coordinates. The same goes for the location of the map, and most other elements we will see later. var marker = new google.maps.Marker(
position: myLatLng,
map: map
title: 'Hello World!'
});This will add a marker on the specified Location. Note that the variable myLatLng looks like this:
var myLatLng = {lat: -25.363, lng: 131.044}; Another useful feature is adding a marker when the map is clicked. You can do that with the following code:
// This event listener calls addMarker() when the map is clicked.
google.maps.event.addListener(map, 'click', function(event) {
addMarker(event.latLng, map);
});
// Adds a marker to the map at the clicked location
function addMarker(location, map) {
var marker = new google.maps.Marker({
position: location,
map: map
});
}
Adding this code will allow you to add a marker on the clicked location. Here you can test this feature.
For further modifications, you should store all markers in an array. This can be done by adding a this code where you create the marker:
//Create the array
var markers = [];
function addMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
//Push the created marker to the array
markers.push(marker);
}
To delete markers, simply call the clearMarkers() function. Example
Add shapes and strokes
Adding shapes and strokes is very similar to adding markers: you need the coordinates of the location you want to add them to, and then you call the constructor for the respective element.
In this example, also shown in the image above, the flight route of the first trans-Pacific flight is shown with a line. As you can see, the coordinates are saved in an array, and the polyline is created using these coordinates and some further options.
var flightPlanCoordinates = [
{lat: 37.772, lng: -122.214},
{lat: 21.291, lng: -157.821},
{lat: -18.142, lng: 178.431},
{lat: -27.467, lng: 153.027
];
var flightPath = new google.maps.Polyline({
path: flightPlanCoordinates,
geodesic: true,
strokeColor: '#FF0000',
strokeOpacity: 1.0,
strokeWeight: 2
});
flightPath.setMap(map); The same goes for the shapes, here you can find other examples for them.
Conclusion
As
I mentioned before, I will not explain every little detail about the API, because there is
already a good documentation for everything. I showed some of the most useful features according to my opinion, and put the references to more examples
and explanations.
In
conclusion, I would say that the Google Map API is a good solution, if you like the
layout of the Google maps, the possibilities to modify a map are pretty
similar to the ones of Leaflets, which I will explain later. The API key
can be received without costs, and as long as you follow the Terms of Use, this solution should give you most options you need to create your default map for a website.
