faysal.ishtiaq_1 0 Newbie Poster

Here is some javascript code ===>

(function() {
    var infowindow;
    window.onload = function() {
        var options = {
            zoom: 3,
            center: new google.maps.LatLng(37.09, -95.71),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var i = 0;
        var marker;
        var btn = document.getElementById('btn');

        var map = new google.maps.Map(document.getElementById('map'), options);
        var bounds = new google.maps.LatLngBounds();
        var places = [];

        btn.onclick = getLatLng;

        function getLatLng(){
            var Latt = parseFloat(document.getElementById("lat").value);
            var Long = parseFloat(document.getElementById("lng").value);
            pushPlace(Latt, Long);
        }

        function pushPlace(lattitude , longitude){
            this.lattitude = lattitude;
            this.longitude = longitude;
            places.push(new google.maps.LatLng(lattitude. longitude));
            var infowindow;
            marker = new google.maps.Marker({
                position: places[i],
                map: map,
                title: 'Place number ' + i
            });

            (function(i, marker){
                google.maps.event.addListener(marker, 'click', function(){
                    if (!infowindow) {
                        infowindow = new google.maps.InfoWindow();
                    }
                    infowindow.setContent('Place number '+i);
                    infowwindow.open(map, marker);
                });
            })(i, marker);
            bounds.extend(places[i]);
            map.fitBounds(bounds);
            i++;
        }
};
})();

I am creating a function that will take user input as longitude and lattitude and display a marker on that places. And automatically set bounds to the map. here is my html mark up ==>

<!doctype html>
<html lan="en">
    <head>
        <meta charset="utf-8">
        <title>Google Maps API v3</title>
        <link rel="stylesheet" href="style.css">
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script src="googlemaps.js"></script>
    </head>

    <body>
        <div id="map"></div>
        <div id="latlong">
            <input type="number" id="lat" placeholder="Lattitude"></input>
            <input type="number" id="lng" placeholder="Longitude"></input>
            <button id="btn">PUSH</button>
        </div>
    </body>

</html>

and css ==>

#map{
    width: 600px;
    height: 300px;
    margin: auto;
    background: #fff;
}

#latlong{
    width: 500px;
    margin: auto;
    padding: 20px;
}

body{
    background: #000;
}

but when I run it on browser, it says "Uncaught RangeError: Maximum call stack size exceeded". How do I get rid of it?