Simple Polylines

by Lawrence Ross

HTML

<div id="map"></div>
<div id="error"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>

CSS

html,
body,
#map {
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

$(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: 2,
        center: {lat: 48.019573, lng: 66.923684},
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      var map = new google.maps.Map(document.getElementById("map"), myOptions);

      path.push(new google.maps.LatLng(2.745537, 101.707316)); //mas
      path.push(new google.maps.LatLng(37.460353, 126.440674)); //kor
      path.push(new google.maps.LatLng(34.789594, 135.438084)); //jpn
      path.push(new google.maps.LatLng(-37.665357, 144.840642)); //aus
      path.push(new google.maps.LatLng(55.410343, 37.902312)); //rus
      path.push(new google.maps.LatLng(40.085148, 116.552407)); //chi
      path.push(new google.maps.LatLng(-6.127211, 106.653684)); //ind
      path.push(new google.maps.LatLng(1.364860, 103.991594)); //sin
      path.push(new google.maps.LatLng(40.760284, -73.772304)); //usa
      path.push(new google.maps.LatLng(53.358796, -2.272773)); //uk
      path.push(new google.maps.LatLng(40.498275, -3.567727)); //spa

      // 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)
        });
      }
      var coordinates = [
        [
          //mas
         ...