Do Even More with the Google Maps API
In the last two articles you’ve seen a lot of classes, methods, and properties, however, they were just a small piece of the Google Maps API puzzle. In this section you’ll see another piece of the API that we’ll use in the final demo. The first class I’ll introduce isgoogle.maps.Polyline
. It draws a line that connects several points, using the options (a google.maps.PolylineOptions
object) passed to the constructor. The methods of this class are just getters and setters, so I won’t go into too much detail, but keep in mind that the most important setters are setPath()
, that defines the points to join, and setMap()
, which sets the map where the line will be drawn.
The google.maps.PolylineOptions
class is full of properties that you can use to tune the polyline to fit your needs. The two most important are those underlying the setters described before – map
and path
. The stroke properties are also noteworthy, as they will be used in the demo. As the name implies, strokeColor
sets the stroke color, and defaults to #000000
(black). strokeOpacity
is a number between 0.0 and 1.0 that sets the stroke opacity. strokeWeight
is a number that sets the stroke width in pixels. I suggest reading the PolylineOptions official documentation to learn about other useful properties.
The demo also takes advantage of the google.maps.LatLngBounds
class. Citing the official documentation, a LatLngBounds
represents a rectangle in geographical coordinates, including one that crosses the 180 degrees longitudinal meridian
. Its constructor accepts up to two parameters that, if given, must be LatLng
instances. The first will be used as the south-west point of the rectangle, while the second acts as the north-east point. The only method that you’ll see in the demo is extend()
, which accepts a LatLng
point, and widens the current rectangle’s bounds to include it. Another method of the LatLngBounds
class is contains()
, which tests if a LatLng
coordinate is within the bounds or not. This class also has other useful methods which work with multiple rectangles. In fact, you can merge (union()
) or intersect (intersects()
) rectangles, but remember that you can only run the action on two LatLngBounds
instances at a time.
Building the Demo
To see the presented classes in action, let’s build a demo that saves the movements of the user, and draws a polyline that join them on a map. Because we must track the user’s movements, the demo uses the geolocationwatchPosition()
method instead of getCurrentPosition()
. The positions will be stored in a variable called path
that is initialized to an empty array.
// Save the positions' history
var path = [];
When the watchPosition()
method runs the success callback function, the user’s latitude and longitude are used to build a google.maps.LatLng
object. That object will then be inserted in the path
array. And, for every new point added, the map will be refreshed to show the user’s movements.
// Save the current position
path.push(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
We also need to adjust the map view so that it contains all the points of the polyline. This is done with a LatLngBounds
object, stored in a variable called latLngBounds
. We need to loop over all the saved points and pass them, one at a time, to the extend()
method. Please note that, at the moment, we’re only preparing the data for use with the fitBounds()
method, so currently the map won’t fit the bounds. In addition, we’ll also mark every point using a Marker
object, so you can easily locate each position. The code that implements this is listed below.
// Create the LatLngBounds object that will be used to fit the view to the points range and
// place the markers to the polyline's points
var latLngBounds = new google.maps.LatLngBounds();
for(var i = 0; i < path.length; i++) {
latLngBounds.extend(path[i]);
// Place the marker
new google.maps.Marker({
map: map,
position: path[i],
title: "Point " + (i + 1)
});
}
Once you have the points to show, we need to build the polyline using the Polyline
and PolylineOptions
classes discussed earlier. This is very easy because you simply need to create a new Polyline
object with the desired options. In the code below, the stroke of the line has been changed to a one pixel wide, blue line, with 70% opacity.
// Creates the polyline object
var polyline = new google.maps.Polyline({
map: map,
path: path,
strokeColor: '#0000FF',
strokeOpacity: 0.7,
strokeWeight: 1
});
The only remaining step, is to ensure that the map’s view contains all of the points of the polyline. This is done by passing the latLngBounds
variable to the fitBounds()
method of the map, as shown below.
// Fit the bounds of the generated points
map.fitBounds(latLngBounds);
Adding Preset Points
Using the code above, we have a completely working demo. However, if you test the code in a desktop environment, thewatchPosition()
method will only run once, so you won’t see any line drawn. To avoid this problem, you can copy the following piece of code and paste it before the block that loops over the path
array and builds the LatLngBounds
object. This code will simply create and insert into the path
array a small set of randomly generated points using the user’s current position.
// Create the polyline's points
for(var i = 0; i < 5; i++) {
// Create a random point using the user current position and a random generated number.
// The number will be once positive and once negative using based on the parity of i
// and to reduce the range the number is divided by 10
path.push(
new google.maps.LatLng(
position.coords.latitude + (Math.random() / 10 * ((i % 2) ? 1 : -1)),
position.coords.longitude + (Math.random() / 10 * ((i % 2) ? 1 : -1))
)
);
}
Demo Page
Using the code shown in the previous sections, the final working demo page is listed below.<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Create a polyline using Geolocation and Google Maps API</title>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
// If the browser supports the Geolocation API
if (typeof navigator.geolocation == "undefined") {
$("#error").text("Your browser doesn't support the Geolocation API");
return;
}
// Save the positions' history
var path = [];
navigator.geolocation.watchPosition(function(position) {
// Save the current position
path.push(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));
// Create the map
var myOptions = {
zoom : 16,
center : path[0],
mapTypeId : google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map"), myOptions);
/*
Uncomment this block if you want to set a path
// Create the polyline's points
for(var i = 0; i < 5; i++) {
// Create a random point using the user current position and a random generated number.
// The number will be once positive and once negative using based on the parity of i
// and to reduce the range the number is divided by 10
path.push(
new google.maps.LatLng(
position.coords.latitude + (Math.random() / 10 * ((i % 2) ? 1 : -1)),
position.coords.longitude + (Math.random() / 10 * ((i % 2) ? 1 : -1))
)
);
}
*/
// Create the array that will be used to fit the view to the points range and
// place the markers to the polyline's points
var latLngBounds = new google.maps.LatLngBounds();
for(var i = 0; i < path.length; i++) {
latLngBounds.extend(path[i]);
// Place the marker
new google.maps.Marker({
map: map,
position: path[i],
title: "Point " + (i + 1)
});
}
// Creates the polyline object
var polyline = new google.maps.Polyline({
map: map,
path: path,
strokeColor: '#0000FF',
strokeOpacity: 0.7,
strokeWeight: 1
});
// Fit the bounds of the generated points
map.fitBounds(latLngBounds);
},
function(positionError){
$("#error").append("Error: " + positionError.message + "<br />");
},
{
enableHighAccuracy: true,
timeout: 10 * 1000 // 10 seconds
});
});
</script>
<style type="text/css">
#map {
width: 500px;
height: 400px;
margin-top: 10px;
}
</style>
</head>
<body>
<h1>Create a polyline</h1>
<div id="map"></div>
<p id="error"></p>
</body>
</html>
Conclusion
This article explained the classes, properties, and methods used to draw a polyline that joins several points on a map. As you’ve seen throughout this series of articles, these APIs can be used to build a lot of great services which enhance your users’ experience. Of course, you can do much more than what has been shown here. By exploring the other classes in the Google Maps API, the possibilities are virtually endless.Frequently Asked Questions (FAQs) about Creating a Polyline Using Geolocation and the Google Maps API
How can I add multiple polylines to my Google Map?
Adding multiple polylines to your Google Map involves creating multiple instances of the Polyline class and adding them to the map. Each instance of the Polyline class represents a separate line on the map. You can customize each line by setting different options such as color, width, and geodesic property. Remember to add each polyline to the map using the setMap() method.
Can I customize the appearance of my polyline?
Yes, you can customize the appearance of your polyline. The PolylineOptions class allows you to set various properties such as color, width, and geodesic. The color property sets the color of the line, the width property sets the thickness of the line, and the geodesic property determines whether the line should follow the curvature of the Earth.
How can I remove a polyline from my Google Map?
To remove a polyline from your Google Map, you can use the setMap() method of the Polyline class and pass null as the argument. This will effectively remove the polyline from the map.
Can I add a click event to my polyline?
Yes, you can add a click event to your polyline. The Polyline class provides the addListener() method, which you can use to listen for click events. When a click event occurs, you can execute any function you want.
How can I draw a complex polyline with multiple points?
To draw a complex polyline with multiple points, you need to create an array of LatLng objects, each representing a point on the line. Then, pass this array to the path property of the PolylineOptions object. The polyline will be drawn connecting these points in the order they appear in the array.
Can I animate the drawing of a polyline?
Yes, you can animate the drawing of a polyline. This involves gradually adding points to the polyline over a certain period of time. You can use the setInterval() function to add a new point to the polyline every few milliseconds, creating the illusion of animation.
How can I use geolocation to draw a polyline?
To use geolocation to draw a polyline, you need to use the Geolocation API to get the user’s current location. Then, you can use this location as a point on your polyline. You can also use the watchPosition() method to continuously update the user’s location and add new points to the polyline as the user moves.
Can I change the opacity of my polyline?
Yes, you can change the opacity of your polyline. The PolylineOptions class provides the opacity property, which you can set to any value between 0.0 (completely transparent) and 1.0 (completely opaque).
How can I make my polyline follow the curvature of the Earth?
To make your polyline follow the curvature of the Earth, you need to set the geodesic property of the PolylineOptions object to true. This will make the polyline follow the shortest path on the surface of the Earth, taking into account its curvature.
Can I add a tooltip to my polyline?
While the Polyline class does not directly support tooltips, you can add a tooltip to your polyline by creating a custom overlay. This involves creating a new class that extends the OverlayView class and implementing the onAdd(), draw(), and onRemove() methods. You can then add an instance of this class to your map, and it will act as a tooltip for your polyline.
I'm a (full-stack) web and app developer with more than 5 years' experience programming for the web using HTML, CSS, Sass, JavaScript, and PHP. I'm an expert of JavaScript and HTML5 APIs but my interests include web security, accessibility, performance, and SEO. I'm also a regular writer for several networks, speaker, and author of the books jQuery in Action, third edition and Instant jQuery Selectors.