Creating a Polyline Using Geolocation and the Google Maps

Share this article

In Getting Directions Using the Google Maps API, I explained how to create a service that lets a user find a route from one address to another. In this article, you’ll learn how to use the Geolocation API together with the Google Maps API to display a polyline on a map that join several points. This article assumes you’re familiar with the material in Working with Geolocation and the Google Maps API and Getting Directions Using the Google Maps API. If you haven’t read them yet, I suggest doing so now.

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 is google.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 geolocation watchPosition() 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, the watchPosition() 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.

Aurelio De RosaAurelio De Rosa
View Author

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.

APIsgeolocationIntermediate
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week
Loading form