Show google map with multiple markers

You can use below code snippet to show Google map with multiple markers.

<style>
    #map_wrapper
    {
        height: 205px;
        width: 298px;
    }

    #map_canvas
    {
        width: 100%;
        height: 100%;
    }
     input[type=file]{
        color:transparent;
    }
</style>

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

    function initialize() {
        var map;
        var bounds = new google.maps.LatLngBounds();
        var mapOptions = {
            mapTypeId: 'roadmap'
        };

        map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
        map.setTilt(45);

        var markers = [
            ['Marker1, Delhi', 24.524235, 77.165726],
            ['Marker2, Delhi', 25.556695, 77.125543]
        ];

        var infoWindowContent = [
            ['<div class="info">' +
            '<h3>DATA1</h3>' +
            '<p>PARA1</p>' + '</div>'],
            ['<div class="info">' +
            '<h3>DATA2</h3>' +
            '<p>PARA2</p>' +
            '</div>']
        ];

        var infoWindow = new google.maps.InfoWindow(), marker, i;

        for (i = 0; i < markers.length; i++) {
            var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
            bounds.extend(position);
            marker = new google.maps.Marker({
                position: position,
                map: map,
                title: markers[i][0]
            });

            google.maps.event.addListener(marker, 'click', (function (marker, i) {
                return function () {
                    infoWindow.setContent(infoWindowContent[i][0]);
                    infoWindow.open(map, marker);
                }
            })(marker, i));

            map.fitBounds(bounds);
        }

        var boundsListener = google.maps.event.addListener((map), 'bounds_changed', function (event) {
            this.setZoom(12);
            google.maps.event.removeListener(boundsListener);
        });

    }
</script>

<div id="map_wrapper" class="map">

      <div id="map_canvas" class="mapping"></div>

</div>