Uncaught InvalidValueError: not a LatLngBounds or LatLngBoundsLiteral: unknown property f

Question

I am using Google map show the multiple location i want to draw the path between that. My path is showing correctly but at console i am getting this error

Uncaught InvalidValueError: not a LatLngBounds or LatLngBoundsLiteral: unknown property f

<script>

var markers;

function GetLocation() {

    var id = document.getElementById("Code").value;

    var request = $.ajax({
        url: "Path",
        type: "GET",
        data:"data="+id,
        dataType: "html"
    });
    request.done(function(json_data) {
        //  alert(json_data);
        var obj = JSON.parse(json_data);

        markers = obj;

        if (obj[0].result == "Failed")
        {
            alert("No Location Found");
        }else{
            initialize();
        }


    });
    request.fail(function(jqXHR, textStatus) {
        alert("Request failed: " + textStatus);
    });

    //The list of points to be connected
    //google.maps.event.addDomListener(window, 'load', initialize);

}


            //var map = null;
            var infowindow = new google.maps.InfoWindow();
            var bounds = new google.maps.LatLngBounds();
            //    var map;
            function initialize() {
                var mapOptions = {
                    center: new google.maps.LatLng(
                            parseFloat(markers[0].lat),
                            parseFloat(markers[0].lng)),
                    zoom: 15,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var service = new google.maps.DirectionsService();

                var infoWindow = new google.maps.InfoWindow();
                map = new google.maps.Map(document.getElementById("map"), mapOptions);
                var lat_lng = new Array();

                var marker = new google.maps.Marker({
                    position: map.getCenter(),
                    map: map,
                    draggable: true
                });
                bounds.extend(marker.getPosition());
                google.maps.event.addListener(marker, "click", function(evt) {
                    // infowindow.setContent("Address:" + marker.getPosition().toUrlValue(7));
                    infowindow.open(map, marker);
                });
                for (var i = 0; i < markers.length; i++) {
                    if ((i + 1) < markers.length) {
                        var src = new google.maps.LatLng(parseFloat(markers[i].lat),
                                parseFloat(markers[i].lng));
                        createMarker(src);

                        var des = new google.maps.LatLng(parseFloat(markers[i + 1].lat),
                                parseFloat(markers[i + 1].lng));
                        createMarker(des);
                        //  poly.setPath(path);
                        service.route({
                            origin: src,
                            destination: des,
                            travelMode: google.maps.DirectionsTravelMode.DRIVING
                        }, function(result, status) {
                            if (status == google.maps.DirectionsStatus.OK) {
                                var path = new google.maps.MVCArray();
                                var poly = new google.maps.Polyline({
                                    map: map,
                                    strokeColor: '#F3443C'
                                });
                                for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
                                    path.push(result.routes[0].overview_path[i]);
                                }
                                poly.setPath(path);
                                map.fitBounds(bounds);
                            }
                        });
                    }
                }
            }

            function createMarker(latLng) {
                var marker = new google.maps.Marker({
                    position: latLng,
                    map: map,
                    draggable: true
                });
                bounds.extend(marker.getPosition());
                google.maps.event.addListener(marker, "click", function(evt) {
                    var address;
                    //                        alert(this.getPosition().toUrlValue(6));

                    var geocoder = new google.maps.Geocoder();
                    geocoder.geocode({'latLng': this.position}, function(results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {
                            alert(results[0].formatted_address);
                            address = results[0].formatted_address;
                            infoWindow.setContent("Address:" + address);
                            infowindow.open(map, this);
                        } else {
                            alert('Geocoder failed due to: ' + status);
                        }
                    });


                });
            }

</script>

<div id='map'></div>

<script async defer
src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY">
</script>

Answer 1

Issues:

1. You are loading the API asynchronously (with async defer) but there is no callback parameter.
2. You are creating the bounds and infoWindow variables (which are objects that depend on the API) before the API has loaded.
3. You are spelling the InfoWindow object differently (infoWindow, infowindow), javascript is case sensitive, those are different variables
4. You are using this inside the callback for the geocoder for the clicked marker, the this inside the geocoder callback function will be different from the this inside the click listener callback, you need to save the this that refers to the marker to use for opening the infowindow.

proof of concept fiddle

code snippet:

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="Code" value="27" />
<script>
  var markers = [{
    lat: 40.7127837,
    lng: -74.0059413
  }, {
    lat: 40.735657,
    lng: -74.1723667
  }];

  function GetLocation() {

    var id = document.getElementById("Code").value;

    var request = $.ajax({
      url: "Path",
      type: "GET",
      data: "data=" + id,
      dataType: "html"
    });
    request.done(function(json_data) {
      var obj = JSON.parse(json_data);

      if (!obj || !obj[0]) {
        initialize();
      } else if (obj[0].result == "Failed") {
        alert("No Location Found");
      } else {
        markers = obj;
        initialize();
      }
    });
    request.fail(function(jqXHR, textStatus) {
      // alert("Request failed: " + textStatus);
      initialize();
    });
  }

  var infoWindow;
  var bounds;

  function initialize() {
    infoWindow = new google.maps.InfoWindow();
    bounds = new google.maps.LatLngBounds();
    var mapOptions = {
      center: new google.maps.LatLng(
        parseFloat(markers[0].lat),
        parseFloat(markers[0].lng)),
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var service = new google.maps.DirectionsService();

    map = new google.maps.Map(document.getElementById("map"), mapOptions);
    var lat_lng = new Array();

    var marker = new google.maps.Marker({
      position: map.getCenter(),
      map: map,
      draggable: true
    });
    bounds.extend(marker.getPosition());
    google.maps.event.addListener(marker, "click", function(evt) {
      infowindow.open(map, marker);
    });
    for (var i = 0; i < markers.length; i++) {
      if ((i + 1) < markers.length) {
        var src = new google.maps.LatLng(parseFloat(markers[i].lat),
          parseFloat(markers[i].lng));
        createMarker(src);

        var des = new google.maps.LatLng(parseFloat(markers[i + 1].lat),
          parseFloat(markers[i + 1].lng));
        createMarker(des);
        service.route({
          origin: src,
          destination: des,
          travelMode: google.maps.DirectionsTravelMode.DRIVING
        }, function(result, status) {
          if (status == google.maps.DirectionsStatus.OK) {
            var path = new google.maps.MVCArray();
            var poly = new google.maps.Polyline({
              map: map,
              strokeColor: '#F3443C'
            });
            for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
              path.push(result.routes[0].overview_path[i]);
            }
            poly.setPath(path);
            map.fitBounds(bounds);
          }
        });
      }
    }
  }

  function createMarker(latLng) {
    var marker = new google.maps.Marker({
      position: latLng,
      map: map,
      draggable: true
    });
    bounds.extend(marker.getPosition());
    google.maps.event.addListener(marker, "click", function(evt) {
      var address;
      var that = this;
      var geocoder = new google.maps.Geocoder();
      geocoder.geocode({
        'latLng': this.position
      }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          address = results[0].formatted_address;
          infoWindow.setContent("Address:" + address);
          infoWindow.open(map, that);
        } else {
          alert('Geocoder failed due to: ' + status);
        }
      });
    });
  }
</script>

<div id='map'></div>

<script async defer src="https://maps.googleapis.com/maps/api/js?callback=GetLocation&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk">
</script>