Map with Marker

by chinmaysharma01

HTML

<h3>My Google Maps Demo</h3>
<!--The div element for the map -->
<div id="map_canvas"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=geometry&callback=initialize">
</script>

CSS

/* Set the size of the div element that contains the map */
#map {
  height: 400px;  /* The height is 400 pixels */
  width: 100%;  /* The width is the width of the web page */
 }

JavaScript

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(41, -70),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

  var startLat = 42;
  var startLng = -72;
  var endLat = 40;
  var endLng = -70;
  var polyCoordinates = new Array();

  polyCoordinates.push(new google.maps.LatLng(startLat, startLng));
  polyCoordinates.push(new google.maps.LatLng(endLat, endLng));


  polyPath = new google.maps.Polyline({
    path: polyCoordinates,
    geodesic: true,
    strokeColor: '#060AB1',
    strokeOpacity: 1.0,
    strokeWeight: 2,
    map: map
  });
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < polyPath.getPath().getLength(); i++) {
    bounds.extend(polyPath.getPath().getAt(i));
    console.log(polyPath.getPath().getAt(i).lng());
  }
  map.fitBounds(bounds);
}