How to set start and end point marker in google maps API

Question

Iam getting map start point and end point lat lng in arguments like this (58.39847354300152, 15.579836368560791) and have to set two different markers for both..now iam able to set only one marker either start or end..how to set for both

function markerStartEnd(map,startPoint,endPoint,startTime,endTime){
var anchor = new google.maps.Point(20,41),
    size = new google.maps.Size(41,41),
    origin = new google.maps.Point(0,0),
    icon = new google.maps.MarkerImage('../../static/js/start.png',size,origin,anchor);
new google.maps.Marker({icon:icon,map:map,position:startPoint});
new google.maps.Label({ position: startPoint, map: map, content:startTime});

icon = new google.maps.MarkerImage('../../static/js/end.png',size,origin,anchor);
new google.maps.Marker({icon:icon,map:map,position:endPoint});
new google.maps.Label({ position: endPoint, map: map, content:endTime});

}

Answer 1

I get an error with the posted code: Uncaught TypeError: google.maps.Label is not a constructor. There is no google.maps.Label class. If I remove that, your code works.

proof of concept fiddle

code snippet:

function initialize() {
  var 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
    });
  markerStartEnd(map, new google.maps.LatLng(40.7127837, -74.00594130000002), new google.maps.LatLng(40.735657, -74.1723667), "10:00", "10:20");
  var bounds = new google.maps.LatLngBounds();
  bounds.extend(new google.maps.LatLng(40.7127837, -74.00594130000002));
  bounds.extend(new google.maps.LatLng(40.735657, -74.1723667));
  map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initialize);

function markerStartEnd(map, startPoint, endPoint, startTime, endTime) {
  var anchor = new google.maps.Point(20, 41),
    size = new google.maps.Size(41, 41),
    origin = new google.maps.Point(0, 0),
    icon = new google.maps.MarkerImage('http://maps.google.com/mapfiles/ms/micons/blue.png', size, origin, anchor);
  new google.maps.Marker({
    icon: icon,
    map: map,
    position: startPoint
  });
  /* new google.maps.Label({
    position: startPoint,
    map: map,
    content: startTime
  }); */

  icon = new google.maps.MarkerImage('http://maps.google.com/mapfiles/ms/micons/green.png', size, origin, anchor);
  new google.maps.Marker({
    icon: icon,
    map: map,
    position: endPoint
  });
  /* new google.maps.Label({
    position: endPoint,
    map: map,
    content: endTime
  }); */
}

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

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>