Map with Marker

by ABBEYSOFT

HTML

<h3>My Google Maps Demo</h3>
<!--The div element for the map -->
<div id="map_canvas"></div>
<input type="text" id="s" onkeyup="myFunction()">
<!-- 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,
    strokeColor: "green",
    strokeOpacity: 0.9,
    strokeWeight: 3
  });
  map.fitBounds(bounds);
        google.maps.event.addListener(polyline, 'mouseover', function(event) {
         this.setOptions({
           strokeOpacity: 0.7
         });
       });

       google.maps.event.addListener(polyline, 'mouseout', function(event) {
         this.setOptions({
           strokeOpacity: 0.9
         });
       });
  
  
  
  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(1008),
    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                                         *
*                   ...