Map with Marker

by ABBEYSOFT

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 src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCHs4Jwbs2CoI7u8NujfRVr4GkWR7cSPbg&libraries=geometry,places&callback=initialize">
</script>

CSS

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

JavaScript

// Initialize and add the map
function initialize() {
  map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

  var lineString = [
    [-86.238922, 39.793147],
    [-86.238922, 39.797797],
    [-86.238829, 39.800122],
    [-86.237062, 39.801703]
  ];
  var path = [];
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < lineString.length; i++) {
    var pt = new google.maps.LatLng(lineString[i][1], lineString[i][0]);
    bounds.extend(pt);
    path.push(pt);
  }
  var polyline = new google.maps.Polyline({
    map: map,
    path: path
  });
  map.fitBounds(bounds);
  var sMark = new google.maps.Marker({
    position: {
      lat: lineString[0][1],
      lng: lineString[0][0]
    },
    map: map,
    title: "Start",
    icon: "http://www.google.com/mapfiles/markerS.png"
  });
  var mark = new google.maps.Marker({
    position: polyline.GetPointAtDistance(100),
    map: map,
    title: "500m"
  });

}
google.maps.event.addDomListener(window, "load", initialize);

/*********************************************************************\
*                                                                     *
* epolys.js                                          by Mike Williams *
* updated to API v3                                  by Larry Ross    *
*                                                                     *
* A Google Maps API Extension                                         *
*                                                                     *
* Adds various Methods to google.maps.Polygon and google.maps.Polyline *
* .GetPointAtDistance() returns a GLatLng at the specified distance   *
*                   along the path.                                   *
*                   The distance is specified in metres               *
*                   Reurns null if the path is shorter than that  ...