google maps vectors and markers

by bulutkartal

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3&amp;libraries=geometry"></script>
<script src="http://www.bdcc.co.uk/Gmaps/LatLngToOSGB.js"></script>
<input type="text" id="ttldist" /> Total Distance
<br>
<input type="text" id="rundist" /> Run Distance
<br>
<input type="text" id="dtg" /> Distance To Go
<br>
<div id="map"></div>

CSS

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

JavaScript

var lengthInMeters;
   
		var map = new google.maps.Map(document.getElementById('map'), {
		  zoom: 2,
		  maxZoom: 8,
		  minZoom: 1,
		  center: {
		    lat: 0,
		    lng: -180
		  },
		  streetViewControl: false,
		  mapTypeId: google.maps.MapTypeId.ROADMAP
		});

		var flightPlanCoordinates = [{
		    lat: 37.772,
		    lng: -122.214
		  }, //Departure Point
		  {
		    lat: 21.291,
		    lng: -157.821
		  }, {
		    lat: -18.142,
		    lng: 178.431
		  }, {
		    lat: -27.467,
		    lng: 153.027
		  } //Final Destination
		];
		var flightPath = new google.maps.Polyline({
		  path: flightPlanCoordinates,
		  geodesic: true,
		  strokeColor: '#FF0000',
		  strokeOpacity: 1.0,
		  strokeWeight: 2
		});
		flightPath.setMap(map);

		var myLatLng = {
		  lat: -4.542,
		  lng: 185.431
		};

		var marker = new google.maps.Marker({
		  position: myLatLng,
		  map: map,
		  title: 'Hello World!'
		});
		for (var i in flightPlanCoordinates) {
		  flightPlanCoordinates[i].passage = flightPath;
		  lengthInMeters = google.maps.geometry.spherical.computeLength(flightPath.getPath()).toFixed(2);
		}
		document.getElementById("ttldist").value = lengthInMeters;